親に設定する

Question

親の状態をsetStateで変更することに問題があります。

constructor(props) { 
     super(props); 
     this.state = { 
sizes: [ 
       {label: "90x50mm", isChecked: false, number: 10}, 
       {label: "85x55mm", isChecked: false, number: 12} 
      ], 
      ratings: [ 
       {label: "OneStar", isChecked: false, imgSrc: 'images/Rating1Star.svg', counter: 22}, 
       {label: "TwoStars", isChecked: false, imgSrc: 'images/Rating2Stars.svg', counter: 18}, 
       {label: "ThreeStars", isChecked: false, imgSrc: 'images/Rating3Stars.svg', counter: 34}, 
       {label: "FourStars", isChecked: false, imgSrc: 'images/Rating4Stars.svg', counter: 27} 
      ], 
      favorites: [ 
       {label: "Only favorites", isChecked: false, number: 12} 
      ] 
} 

、すべての要素Imは異なるコンポーネントでチェックボックスを作成するための、その後

_setProps() { 
    this.setState({ 
     isChecked: !this.state.isChecked 
    }); 
} 

、例：最初に私は私のRootView.jsxを持っている私のCheckBoxコンポーネントと

return (
      this.props.sizes.map((size, idx) => { 
       return (
        <Checkbox 
         key={"size"+idx} 
         label={size.label} 
         checked={size.isChecked} 
         number={size.number} 
         _setProps={size.props._setProps()} 
        /> 
       ) 
      }) 
     ) 

、中私は持っている：

render() { 
     return (
      <div className="Checkbox"> 
       <form> 
        <input 
         type="checkbox" 
         id="check" 
         onClick={this.props._setProps.bind(this)} 
        /> 
        <img src={this.props.imgSrc}/> 
        <label htmlFor="check" id="label">{this.props.label}</label> 
        <label htmlFor="check" id="number">{this.props.number}</label> 
       </form> 
      </div> 
     ) 
    } 

そして私のonClickでは、RootView.jsxの配列の1つの要素に対してisCheckedの状態を変更したいと考えています。

可能ですか？

Answer 1

はい、あなたは、引数

render() { 
    return (
     <div className="Checkbox"> 
      <form> 
       <input 
        type="checkbox" 
        id="check" 
        onClick={this.props._setProps.bind(this, this.props.index)} 
       /> 
       <img src={this.props.imgSrc}/> 
       <label htmlFor="check" id="label">{this.props.label}</label> 
       <label htmlFor="check" id="number">{this.props.number}</label> 
      </form> 
     </div> 
    ) 
} 

そして変化として、この指標を送るあなたが

return (
      this.props.sizes.map((size, idx) => { 
       return (
        <Checkbox 
         key={"size"+idx} 
         index={idx} 
         label={size.label} 
         checked={size.isChecked} 
         number={size.number} 
         _setProps={this.props._setProps.bind(this)} 
        /> 
       ) 
      }) 
     ) 

でそして、あなたのCheckBoxコンポーネントのチェックボックス要素を作成する配列要素のインデックスを渡す必要があります

_setProps(idx) { 
    var sizes = this.state.sizes; 
    sizes[idx]["ischecked"] = !sizes[idx]["ischecked"]; 
    this.setState({ 
     sizes: sizes 
    }); 
} 

私はそれが問題の解決に役立つことを願っています