如何結合複選框與文本輸入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.

希望這有助於。