Question

我正在尝试在Reactjs中构建一个Ui组件，它组合了一个复选框和一个附加到它的文本输入（而不是文本标签），这样如果选中该复选框，用户可以更改文本输入，如果是未选中用户将无法执行此操作最终目标是在组件外部渲染所有textinputs valus，将其作为列表或菜单项进行检查。它看起来应该是这样的： Checkbox with Text input

任何人都知道我应该怎么做？我对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

最简单，类似React的方法是使用父包装器组件 - 比如说LabeledCheckbox包含Text输入和Checkbox组件。

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

在这种情况下，孩子们永远不会保持自己的状态，而只是简单地呼叫回调和被支持。

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.

希望这有帮助。

如何在reactjs中将复选框与文本输入结合起来

2 个答案: