Как скомпоновать флажок с текстовым вводом в responsejs

Question

Я пытаюсь создать компонент Ui в Reactjs, который сочетает в себе флажок и текст, прикрепленный к нему (вместо текстовой метки), так что если флажок установлен, пользователь может изменить ввод текста, и если его неконтролируемый пользователь не сможет это сделать , конечной целью является визуализация вне компонента всех текстовых входов valus, которые остались отмеченными как список или как элемент меню. Его должно выглядеть так: Checkbox with Text input

Кто-нибудь знает, как я должен это делать? im new to 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, который содержит ваш ввод текста и ваши компоненты 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')); 

Here is the fiddle.

Надеется, что это помогает.