Как совместить флажок с вводом текста в реагировать

Question

Я пытаюсь построить Ui-компонент в Reactjs, который сочетает в себе флажок и текстовый ввод, привязанный к нему (вместо текстовой метки), так что если флажок установлен, пользователь может изменить ввод текста, и если его отключить пользователь не сможет этого сделать, поэтому конечная цель состоит в том, чтобы отобразить за пределами компонента все значения textinputs, оставленные отмеченными как список или как пункт меню. Это должно выглядеть так: Флажок с вводом текста

кто-нибудь знает, как мне это сделать? Я новичок в Reactionjs и немного запутался, как передавать логику между двумя компонентами (как здесь, между флажком и вводом текста, так и между компонентом "combo" и внешним отображаемым списком) . заранее спасибо!

РЕДАКТИРОВАТЬ1: мне удалось построить компонент, но я не могу заставить детей вызывать родительский обработчик (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 который содержит ваш текстовый ввод и ваши компоненты Checkbox.

Когда какой-либо из дочерних компонентов что-то делает, они вызывают обратный вызов, предоставленный родителем, и родитель поддерживает состояние для двух компонентов, передавая это состояние в подпорки обоих потомков.

Дети в этом случае никогда бы не поддерживали свое собственное состояние, вместо этого просто вызывали обратные вызовы и получали подпитку.

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

Вот скрипка.

Надеюсь это поможет.