확인란과 텍스트 입력을 reactjs에서 결합하는 방법

Question

Reactjs에 체크 상자와 텍스트 입력 대신 텍스트 레이블이 결합 된 Ui 구성 요소를 작성하려고합니다. 확인란을 선택하면 사용자가 텍스트 입력을 변경할 수 있습니다. 체크하지 않으면 사용자가 그렇게 할 수 없습니다. 최종 목표는 구성 요소 외부에서 목록으로 또는 메뉴 항목으로 체크 된 모든 textinputs valus를 렌더링하는 것입니다. 그 모양은 다음과 같아야합니다. Checkbox with Text input

아무도 모르게 어떻게해야합니까? 새로운 reactjs에 새롭고 두 컴퍼넌트 (여기서는 체크 박스와 텍스트 입력 사이, "콤보"구성 요소와 외부 렌더링 목록 사이) 사이에서 로직을 전달하는 방법을 조금 혼란스럽게 생각합니다. 미리 감사드립니다. !

EDIT1는 : 글쎄 구성 요소를 구축하는 데 성공하지만 난 아이들이 실제로 마법이 일어날 수 있도록하기 위해 부모 핸들러 (handlerCheckbox, handlerInput)를 호출 할 캔트.

뭐가 잘못 되었나요? 이것은이다

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

간단한 작업을 수행하는, 반작용 같은 방법 :이 부모 인

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

}

:

이

아이입니다 상위 래퍼 구성 요소가 있습니다 (예 : 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.

희망을.