在React中检测到更改时更改元素类型

Question

所以我有一个带有相关标签的复选框列表，标签是工具提示，因此被定义为锚标签。见图：

我的复选框列表的工作方式是当复选框为checked时，它会切换输入以显示在右侧，如上所示。但是，在这些复选框的最后一项是一个名为＆＃34;其他＆＃34;。为此，检测到更改事件，我想简单地更改＆＃34;其他＆＃34;将文字发送到<input ="text" />并修改我现有的所有工作函数让我越过，并希望在相同 handleChange10事件中如何执行此操作在下面的代码中（我的代码片段下面显示了这个视图的所有内容，但仅针对需要帮助的部分）？：

handleChange9() {
    this.setState({
      checked9: !this.state.checked9
    })
}

handleChange10() {
    this.setState({
      checked10: !this.state.checked10
    })
}

toggle9() {
    this.setState({
      tooltipOpen9: !this.state.tooltipOpen9
    });
}

const numberNeeded9 = this.state.checked9
  ? <Input type="text" className="flrt" id="addlInfo9" placeholder="how many" onChange={this.inputNumOfEx}></Input>
  : null;

const numberNeeded10 = this.state.checked10
  ? <Input type="text" className="flrt" id="addlInfo10" placeholder="how many" onChange={this.inputNumOfOth}></Input>
  : null;

<FormGroup check>
  <span className="flrt">{numberNeeded8}</span>
  <Label className="custType" check>
    <Input type="checkbox" checked={this.state.checked8} onChange={this.handleChange8} />
    <a id="custType8" className="custTypeTxt">Scientists</a>
    <Tooltip placement="right" isOpen={this.state.tooltipOpen8} target="custType8" toggle={this.toggle8}>
      Data, Research
   </Tooltip>
  </Label>
</FormGroup>

<FormGroup check>
  <span className="flrt">{numberNeeded10}</span>
  <Label className="custType" check>
    <Input type="checkbox" checked={this.state.checked10} onChange={this.handleChange10} />
    <a id="custType10" className="custTypeTxt">Other</a>
  </Label>
</FormGroup>

Answer 1

<FormGroup check>
  <span className="flrt">{numberNeeded10}</span>
  <Label className="custType" check>
    <Input type="checkbox" checked={this.state.checked10} onChange={this.handleChange10} />
    {
      this.state.checked10? 
        <input type="text" /> :
        <a id="custType10" className="custTypeTxt">Other</a>
    }
  </Label>
</FormGroup>

但我不认为你应该这样做。您可以保留所选复选框的状态ID，并且您不需要handleChange1,2,3,4,5,6,7()。