Javascript 如何在React中单击单选按钮时显示div

我有两个收音机按钮，但如果用户单击“是”，我希望其中一个按钮显示另一个div。我是新手。 我已经尝试过这段代码，但是第二段代码并没有隐藏第一段代码的内容

崩溃 用户单击yes， 另一个div将打开以获取更多信息。 用户单击否， 早些时候打开的部门关闭了。 我知道如何在JavaScript中切换，但我想根据状态进行更新

    import React, { Component } from "react";
    class Radio extends Component {
      constructor(props) {
        super(props);
        this.state = { clickedYes: false, clickedNo: false };
        this.yesHandler = this.yesHandler.bind(this);
        this.noHandler = this.noHandler.bind(this);
      }
      yesHandler() {
        this.setState({
          clickedYes: !this.state.clickedYes
        });
      }
      noHandler() {
        this.setState({
          clickedNo: !this.state.clickedNo
        });
      }
      render() {
        const radioNo = this.state.clickedNo ?
        //  Hide div when true 
         : null;

        const radioYes = this.state.clickedYes ? <h1>Yes</h1> : null;

        return (
          <>
            <input
              type="radio"
              name="release"
              id=""
              clickedYes={this.state.clickedYes}
              onClick={this.yesHandler}
             />
            <input
              type="radio"
              name="release"
              clickedNo={this.state.clickedNo}
              onClick={this.noHandler}
              id=""
            />

            {radioYes}
            {radioNo}
          </>
        );
       }
     }
     export default Radio;

import React，{Component}来自“React”；
类无线电扩展组件{
建造师（道具）{
超级（道具）；
this.state={clickedYes:false，clickedNo:false}；
this.yesHandler=this.yesHandler.bind（this）；
this.noHandler=this.noHandler.bind（this）；
}
叶山德勒（）{
这是我的国家({
clickedYes:！this.state.clickedYes
});
}
noHandler（）{
这是我的国家({
clickedNo:！this.state.clickedNo
});
}
render（）{
const radioNo=this.state.clickedNo？
//当为true时隐藏div
：null；
const radioYes=this.state.clickedYes？是：空；
返回(
{radioYes}
{radioNo}
);
}
}
导出默认收音机；

您只需在想要显示的div中添加一个

样式

声明，然后将其连接到state对象即可

  <div style={{ display: this.state.clickedYes ? 'block' : 'none'}}>This shows when the radioYes input is clicked</div>

单击radioYes输入时显示

@bgaynor78是正确的，但我更喜欢下面的内容，因为您不会创建不可见的dom节点

{
this.state.clickedYes&&（单击radioYes输入时显示）
}

这里有两种解决方案。

与Standrad反应

import React，{Component}来自“React”；
类无线电扩展组件{
建造师（道具）{
超级（道具）；
this.state={status:0}；//0:no show，1:show yes，2:show no。
}
radioHandler=（状态）=>{
this.setState（{status}）；
};
render（）{
const{status}=this.state；
返回(
this.radioHandler（1）}/>
this.radioHandler（2）}/>
{status==1&&drawYesContent（）}
{status==2&&drawNoContent（）}
);
}
}
导出默认收音机；

带钩

从“React”导入React；
功能收音机（）{
const[status，setStatus]=React.useState（0）//0:不显示，1:显示是，2:显示否。
常量radioHandler=（状态）=>{
设置状态（状态）；
};
返回(
radioHandler（1）}/>
radioHandler（2）}/>
{status==1&&drawYesContent（）}
{status==2&&drawNoContent（）}
);
}
导出默认收音机；

您可以尝试使用

{this.state.clickedYes&&（Yes）}{this.state.clickedNo&（No）}

谢谢。这个答案正是我想要的。如何使用钩子？谢谢，你的方法有效，但我不想使用样式方法。

{
  this.state.clickedYes && (<div>This shows when the radioYes input is clicked</div>)
}

import React, { Component } from "react";

class Radio extends Component {
  constructor(props) {
    super(props);
    this.state = { status: 0 }; // 0: no show, 1: show yes, 2: show no.
  }

  radioHandler = (status) => {
    this.setState({ status });
  };

  render() {
    const { status } = this.state;

    return (
      <>
        <input type="radio" name="release" checked={status === 1} onClick={(e) => this.radioHandler(1)} />
        <input type="radio" name="release" checked={status === 2} onClick={(e) => this.radioHandler(2)} />
        {status === 1 && drawYesContent()}
        {status === 2 && drawNoContent()}
      </>
    );
  }
}

export default Radio;

import React from "react";

function Radio () {
  const [status, setStatus] = React.useState(0) // 0: no show, 1: show yes, 2: show no.

  const radioHandler = (status) => {
    setStatus(status);
  };

  return (
    <>
      <input type="radio" name="release" checked={status === 1} onClick={(e) => radioHandler(1)} />
      <input type="radio" name="release" checked={status === 2} onClick={(e) => radioHandler(2)} />
      {status === 1 && drawYesContent()}
      {status === 2 && drawNoContent()}
    </>
  );
}

export default Radio;