React JS의 체크 박스 값을 설정하십시오.

Question

다른 입력 필드의 onChange 기능으로 확인란의 값을 변경하려고합니다.

나는 이런 식으로 뭔가를 :

const inputRange = ({language, firstValue, secondValue, minValue, maxValue, step, handleChange, chcboxValue}) => { 
return (
    <div> 
     <div className="rangeValues">Range : {firstValue} - {secondValue}</div> 


     <section className="range-slider"> 
      <input type="checkbox" checked={chcboxValue} /> 
      <input type="range" value={firstValue} min={minValue} max={maxValue} step={step} onChange={handleChange.bind(this, "first")}/> 
      <input type="range" value={secondValue} min={minValue} max={maxValue} step={step} onChange={handleChange.bind(this, "second")}/> 

      <div className="minValue">{minValue}</div> 
      <div className="maxValue">{maxValue}</div> 
     </section> 
    </div> 
); 
}; 

초기로드에있는 체크 박스 값을 false로 설정 I 것을 :

class price extends React.Component { 
constructor(props){ 
    super(props); 

    this.state = { 
     minValue: 0, 
     maxValue: 20000, 
     step: 1000, 
     firstValue: null, 
     secondValue: null, 
     chcboxValue: false 
    }; 

    this.handleChange = this.handleChange.bind(this); 
} 

componentWillMount(){ 
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue}); 
} 

handleChange(name, event){ 
    let value = event.target.value; 
    //We set the state value depending on input that is clicked 
    if(name === "second"){ 
     if(parseInt(this.state.firstValue) < parseInt(value)){ 
      this.setState({secondValue:value}); 
     } 
    }else{ 
     //The first value can't be greater than the second value 
     if(parseInt(value) < parseInt(this.state.secondValue)) { 
      this.setState({firstValue: value}); 
     } 
    } 

    //We set the checkbox value 
    if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)){ 
     this.setState({chcboxValue: true}); 
    }else{ 
     this.setState({chcboxValue: false}); 
    } 
} 

render(){ 
    const language = this.props.language; 
    return (
     <div> 
      <div className="priceTitle">{language.price}</div> 
      <InputRange language={language} 
         firstValue={parseInt(this.state.firstValue)} 
         secondValue={parseInt(this.state.secondValue)} 
         minValue={parseInt(this.state.minValue)} 
         maxValue={parseInt(this.state.maxValue)} 
         step={parseInt(this.state.step)} 
         handleChange={this.handleChange} 
         chcboxValue={this.state.chcboxValue}/> 
     </div> 
    ); 
} 
} 

내 InputRange 구성 요소는이 같은 것입니다. 사용자가 가격 범위 슬라이더의 값을 변경하면 확인란의 값이 true로 변경됩니다.

사용자가 가격 범위 슬라이더의 값을 초기 값 (최소값 및 최대 값)으로 변경하면 확인란 값이 다시 false로 변경되기를 원합니다.

예를 들어 작동하지 않습니다.

아이디어가 있으십니까?

Answer 1

this.setState()이 완료되기 전에 값을 확인 중이므로 예제가 제대로 작동하지 않습니다. this.setState()은 즉시 state을 변경하지 않는다는 것을 잊지 마십시오.

당신은 당신이 체크 박스

updateCheckBox(){ 
    if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)){ 
     this.setState({chcboxValue: true}); 
    }else{ 
     this.setState({chcboxValue: false}); 
    } 
} 

의 값을 업데이트 한 다음 handleChangethis.setState() 호출에 전달하는 기능을 만들 수 있습니다, 그것을 해결하려면.

handleChange(name, event){ 
    let value = event.target.value; 
    //We set the state value depending on input that is clicked 
    if(name === "second"){ 
     if(parseInt(this.state.firstValue) < parseInt(value)){ 
      this.setState({secondValue:value}, this.updateCheckBox); 
     } 
    }else{ 
     //The first value can't be greater than the second value 
     if(parseInt(value) < parseInt(this.state.secondValue)) { 
      this.setState({firstValue: value}, this.updateCheckBox); 
     } 
    } 

jsfiddle

Answer 2

확실하지하지만 그것을 시도 :

React.createElement('input',{type: 'checkbox', defaultChecked: false}); 

또는

<input type="checkbox" checked={this.state.chkbox} onChange={this.handleChangeChk} /> 

또는

var Checkbox = React.createClass({ 
    getInitialState: function() { 
    return { 
     isChecked: true 
    }; 
    }, 
    toggleChange: function() { 
    this.setState({ 
     isChecked: !this.state.isChecked // flip boolean value 
    }, function() { 
     console.log(this.state); 
    }.bind(this)); 
    }, 
    render: function() { 
    return (
     <label> 
     <input 
      type="checkbox" 
      checked={this.state.isChecked} 
      onChange={this.toggleChange} /> 
     Check Me! 
     </label> 
    ); 
    } 
}); 

React.render(<Checkbox />, document.getElementById('checkbox')); 

Answer 3

여기에 확인란을 지원하는 일반 양식 변경 핸들러가 있습니다.

onFormChange: (e) => { 
    // In my example all form values are stored in a state property 'model' 
    let model = this.state.model; 

    if(e.target.type == 'checkbox') { 

     if(model[e.target.name] === false) { 
     model[e.target.name] = true; 
     } else if(model[e.target.name] === true) { 
     model[e.target.name] = false; 
     } else { 
     // if the property has not be defined yet it should be true 
     model[e.target.name] = true; 
     } 
    } else { 
     model[e.target.name] = e.target.value; 
    } 

    // Update the state 
    this.setState({ 
     model: model 
    }); 
    }