Question

我已经实现了这种条件，但是没有预期的结果。第一次单击时，它正常工作，但是当我来回切换时，它不工作。当我单击“是”时，其显示“否”选择结果，有时什么也没有。

Handler(){
  if (document.getElementById("Yes").checked) {
    this.setState({
      isHiddenYes: !this.state.isHiddenYes
    });
    console.log("hello yes");
  } else {
    this.setState({
      isHiddenNo: !this.state.isHiddenNo
    });
    console.log("hello no");
  }
};

<div className="textBlock" onChange={this.Handler}>

<div><input type="radio" name="List" id="Yes" value="Yes" required />Yes</div>
<div><input type="radio" name="List" id="No" value="No" />No</div>

{
(this.state.isHiddenYes) ?
(
<div className="subtitle1">
    <div className="input">
        <div><input type="radio" name="L1" id="1" value="1" required />1</div>

        <div><input type="radio" name="L1" id="2" value="2" />2</div>
    </div>
</div>
<div className="subtitle2">
    <div className="input">
        <div><input type="radio" name="R1" id="1" value="3" required />3</div>

        <div><input type="radio" name="R1" id="2" value="4" />4</div>
    </div>
</div>) :
''
}

{
(this.state.isHiddenNo) ?
(<div className="No">
    <div className="inputIcon" onClick={this.Onclick}>

        <input className="subtitle3" type="text" />
    </div>
    {
    (this.state.isHiddenX) ?
    (<div className="radio">
        <fieldset>
            <div><input type="radio" name="LR1" id="1" value="1" required />1</div>

            <div><input type="radio" name="LR1" id="2" value="2" />2</div>
        </fieldset>
    </div>) : ''
    }
    <div className="inputIcon" onClick={this.Onclick}>

        <input className="subtitle4" type="text" />

    </div>
    {
    (this.state.isHiddenY) ?
    (<div className="Radio">
        <fieldset>
            <div><input type="radio" name="LR2" id="3" required />3</div>

            <div><input type="radio" name="LR2" id="4" />4</div>
        </fieldset>
    </div>) : ''
    }
</div>)
: ''
}
</div>

不确定我是否做对了。

基本上，当我单击Yes ==>时，我需要显示一些代码，但是当我单击No ==>时，需要显示其他代码。就我而言，当我第一次单击时，它工作正常，但在“是”和“否”选择上来回切换时，它无法正常工作。

错误：1。）有时它在YES上没有显示任何代码 2.）有时空白什么也没显示 3.）当我单击“否”时，它会显示正确的代码（当我选择其中的任何一个时）->它带我进入“是”代码。

Answer 1

您必须将JSX元素包装在一个封闭标签中

像这样

  {true ? (
    <div>
      <div> </div>
      <div> </div>
    </div>
  ) : (
    ""
  )}

不能这样

  {true ? (
      <div> </div>
      <div> </div>
  ) : (
    ""
  )}

更新

不建议直接操作DOM，React不适用于

代替此

Handler(){
  if (document.getElementById("Yes").checked) {
    this.setState({
      isHiddenYes: !this.state.isHiddenYes
    });
    console.log("hello yes");
  } else {
    this.setState({
      isHiddenNo: !this.state.isHiddenNo
    });
    console.log("hello no");
  }
};

您可以这样做

  onRadioButtonChange = e => {
    const { value } = e.target;
    console.log(value);
    if (value === "Yes") {
      this.setState({
        isHidden: true
      });
      console.log("hello yes");
    } else {
      this.setState({
        isHidden: false
      });
      console.log("hello no");
    }
  };

并将onRadioButtonChange添加到您的单选元素 喜欢这样

  <div>
    <div>
      <input
        onChange={this.onRadioButtonChange}
        type="radio"
        name="List"
        value="Yes"
        required
      />Yes
    </div>
    <div>
      <input
        onChange={this.onRadioButtonChange}
        type="radio"
        name="List"
        value="No"
      />No
    </div>
    {this.state.isHidden ? (
      <h1>Hidden Yes Element</h1>
    ) : (
      <h1>Hidden No Element</h1>
    )}
  </div>

此处的代码格式正确https://codesandbox.io/embed/6v2p1wl25k

Answer 2

事件onChange={this.Handler}应该在两个输入type="radio" name="List"上而不是div上。

如果条件不起作用，如何处理条件中另一个条件内的条件

2 个答案: