如何结合复选框与文本输入reactjs

Question

我想在Reactjs中构建一个Ui组件，它将一个复选框和一个文本输入合并到它（而不是文本标签），这样如果复选框被选中，用户可以改变文本输入，如果未选中，用户将不能这样做 最终目标是在组件外部呈现所有textinput值，这些值将作为列表或作为菜单项进行检查。 它应该看起来像这样： Checkbox with Text input

任何人都知道我该怎么做？ im新的reactjs和有点困惑如何传递两个组件之间的逻辑（如在这里复选框和文本输入之间，“组合”组件和外部渲染列表之间）。 在此先感谢！

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> 
    ) 
} 

}

这是父：

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> 

    ) 
} 

}

Answer 1

最简单的，阵营样的方式做，这是有一个父包装组件 - 例如LabeledCheckbox其中包含您的文本输入和您的复选框组件。

当任何一个子组件执行某些操作时，它们会调用父级提供的回调，并且父级维护这两个组件的状态，并将该状态传递给两个子级的道具。

在这种情况下，孩子们永远不会保持自己的状态，而只是调用回调并被道具喂养。

Answer 2

使用复选框和输入字段创建一个组件，其中包含复选框和文本字段的状态。

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

你可以做这样的事情：

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')); 

Here is the fiddle.

希望这有助于。