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

Question

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

分解用户单击是，另一个 div 打开以获取更多信息。 用户点击no，之前打开的div关闭。 我知道如何在 JavaScript 中切换，但我想根据 state 进行更新。

    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;

Answer 1

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

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

Answer 2

这里有两个解决方案。

使用标准反应

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;

使用 React Hook

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;

Answer 3

您只需将style声明添加到要显示的 div 中，然后将其连接到 state object 即可。

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