User interface 如何在reactjs中将复选框与文本输入相结合

我试图在Reactjs中构建一个Ui组件，它将复选框和附加到它的文本输入（而不是文本标签）结合在一起，这样，如果选中复选框，用户可以更改文本输入，如果未选中，用户将无法这样做 最终目标是在组件外部呈现所有文本输入值，这些值作为列表或菜单项保留选中状态。 它应该是这样的：

有人知道我该怎么做吗？我是reactjs新手，对如何在两个组件之间传递逻辑有点困惑（比如在这里，复选框和文本输入之间，以及“combo”组件和外部呈现列表之间）。 提前谢谢

EDIT1： 我成功地构建了这个组件，但是我不能让孩子们调用父处理器（handlerCheckbox，handlerInput）来真正实现这个神奇的过程

我做错了什么

这是孩子：

  class CheckboxTxtInput extends React.Component{
constructor(props){
    super(props);
    console.log(props.isChecked)
}

handleCheckboxChild(e) {
    this.props.handleCheckbox(e,this.props.id)
}
handleInputChild(e){
     this.props.handleInput(e,this.props.id)
}
render(){
    return (
        <div>
            <input type="checkbox" onChange={this.handleCheckboxChild} defaultChecked={this.props.isChecked} />
            <input type="text" value={this.props.inputValue} disabled={!this.props.isChecked} onChange={this.handleInputChild}/>
        </div>
    )
}

类CheckboxTxtInput扩展React.Component{
建造师（道具）{
超级（道具）；
console.log（props.isChecked）
}
handleCheckboxChild（e）{
this.props.handleCheckbox（e，this.props.id）
}
handleInputChild（e）{
this.props.handleInput（e，this.props.id）
}
render（）{
返回(
)
}

}

这是家长：

export default class Text extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        textItems: [{id:0,inputValue:'text',isChecked:true},{id:1,inputValue:'text',isChecked:true}
        ,{id:2,inputValue:'text',isChecked:true},{id:3,inputValue:'text',isChecked:true}]
    };
    this.handleCheckbox = this.handleCheckbox.bind(this);
    this.handleInput= this.handleInput.bind(this);
}
handleCheckbox(e,id) {
    var stateCopy = Object.assign({}, this.state);
    stateCopy.textItems[id].isChecked = e.target.value;
    this.setState(stateCopy);
}

handleInput(e,id){
    var stateCopy = Object.assign({}, this.state);
    stateCopy.textItems[id].text = e.target.value;
    this.setState(stateCopy);
}
render () {
    return (
       <div>
           <hr className="divider-long"/>
           <UI.sectionDividerLabeled label="Show/Hide Text"/>
           <hr className="divider-long"/>
           <p>Here you can show\hide your text</p>
           <div>
               <CheckboxTxtInput id={this.state.textItems[0].id} isChecked={this.state.textItems[0].isChecked}
                                 inputValue={this.state.textItems[0].inputValue} handleInput={this.handleInput}
                                 handleCheckbox={this.handleCheckbox} />
               <CheckboxTxtInput id={this.state.textItems[1].id} isChecked={this.state.textItems[1].isChecked}
                                 inputValue={this.state.textItems[1].inputValue} handleInput={this.handleInput}
                                 handleCheckbox={this.handleCheckbox}/>
               <CheckboxTxtInput id={this.state.textItems[2].id} isChecked={this.state.textItems[2].isChecked}
                                 inputValue={this.state.textItems[2].inputValue}
                                 handleInput={this.handleInput} handleCheckbox={this.handleCheckbox}/>
               <CheckboxTxtInput id={this.state.textItems[3].id} isChecked={this.state.textItems[3].isChecked}
                                 inputValue={this.state.textItems[3].inputValue} handleInput={this.handleInput}
                                 handleCheckbox={this.handleCheckbox}/>
           </div>
               <RenderText />
           </div>

    )
}

导出默认类文本扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
textItems:[{id:0，inputValue:'text'，isChecked:true}，{id:1，inputValue:'text'，isChecked:true}
，{id:2，inputValue:'text'，isChecked:true}，{id:3，inputValue:'text'，isChecked:true}]
};
this.handleCheckbox=this.handleCheckbox.bind（this）；
this.handleInput=this.handleInput.bind（this）；
}
手柄检查盒（e，id）{
var stateCopy=Object.assign（{}，this.state）；
stateCopy.textItems[id].isChecked=e.target.value；
此.setState（状态副本）；
}
handleInput（e，id）{
var stateCopy=Object.assign（{}，this.state）；
stateCopy.textItems[id].text=e.target.value；
此.setState（状态副本）；
}
渲染（）{
返回(


您可以在此处显示/隐藏文本

)
}

---

}最简单的、类似于React的方法是使用一个父包装器组件，比如

LabeledCheckbox

，它包含文本输入和复选框组件

当任一子组件执行某项操作时，它们调用父组件提供的回调，父组件维护两个组件的状态，并将该状态传递给两个子组件的props

---

在这种情况下，孩子们将永远不会维持自己的状态，而只是简单地打电话回电并得到支持

创建一个带有复选框的组件，输入字段带有复选框和文本字段的状态

然后你可以在你想要的地方重复使用它

您可以这样做：

class CheckboxTxtInput extends React.Component{
  constructor(){
       super();

       this.state = {
        checkbox: false,
        inputValue: ""
       }
  }

  handleCheckbox(e){
    this.setState({checkbox: e.target.checked})
  }

  handleInput(e){
    this.setState({inputValue: e.target.value})
  }

  render(){
    return (
        <div>
        <input type="checkbox" onChange={this.handleCheckbox.bind(this)} checked={this.state.checkbox}/>
        <input type="text" value={this.state.inputValue} disabled={this.state.checkbox} onChange={this.handleInput.bind(this)}/>
      </div>
    )
  }
}

class Test extends React.Component {
        render(){
           return (
               <div><CheckboxTxtInput /></div>
           )
        }
}

React.render(<Test />, document.getElementById('container'));

类CheckboxTxtInput扩展React.Component{
构造函数（）{
超级（）；
此.state={
复选框：false，
输入值：“
}
}
手电筒（e）{
this.setState（{checkbox:e.target.checked}）
}
手动输入（e）{
this.setState（{inputValue:e.target.value}）
}
render（）{
返回(
)
}
}
类测试扩展了React.Component{
render（）{
返回(
)
}
}
React.render（，document.getElementById（'container'）；

---

希望这能有所帮助。

所以如果我能让你明白，请告诉我。我需要制作两个组件（一个用于复选框，一个用于文本输入），并用第三个组件（作为父组件）将它们包装起来？复选框组件和文本输入组件是否应具有状态？还是仅仅是父母？我正在努力弄清楚parnet是如何控制孩子们的（因为如果选中复选框，输入文本字段知道它可以被启用），谢谢Dudep，没错。两个子系统中没有状态，只有父系统中。只需使用道具将家长的状态传递给每个孩子谢谢你真的帮助了我！你有没有可能帮我处理这篇文章的编辑部分？提前谢谢！问一个新问题。这是你第一个问题的答案。