如何在 REACT 表單中綁定復選框？

Question

我有一個帶有輸入和復選框元素的表單。 我正在嘗試綁定復選框，但它不起作用。 我是 REACT 的新手，可能正在使用舊方法，所以請在說服我嘗試新方法之前幫助我解決這個問題。 你可以和我分享兩個。 這對我的學習最有利。

這是一個例外

handleMeetCheckBox(event){
 console.log(event.target.type)
 if (event.target.type === "checkbox"){      
   this.setState({[this.state.meet]:event.target.checked}) 
 } 
}
.
. 
.
render(){
return(
<div>
    <input 
      type="checkbox" 
      name="meet" 
      checked={this.state.meet} 
      onChange={this.handleMeetCheckBox} 
    />
    Want to meet?<br />
    <input type="checkbox" name="secret" />Secret?
    <p>If 'Secret' then....</p><br />
    Subject:<input type="text" name="subject"/><br /><br />
    Comments:<br /> <textarea name="comments" value=""  width="50"/>
    <hr />
    <button type="button">Submit</button>
</div>
  )
 }
}

這是代碼筆

Answer 1

實際問題出在代碼中

this.setState({ [this.state.meet]: event.target.checked });

在 this.setState 中設置屬性的方式。

[this.state.meet] 評估為“假”，因此設置 state 時考慮到鍵為“假”，值為“event.target.checked”，

將其更改為this.setState({ meet: event.target.checked });

它會起作用，state 根據需要更改。

額外說明：

如果，this.state = {滿足：假，秘密：假，主題：“”，評論：“”，假：“x”，真：“c” }；

和this.setState({ [this.state.meet]: event.target.checked }); 用來

如果您執行 console.log(this.state); 則在上述行之后

output 將

Object {評論：“”，假：真，滿足：假，秘密：假，主題：“”，真：“c” }

從而更改通過方括號計算的密鑰 [this.state.meet]

Answer 2

似乎當您更新 state 時，您將值設置為不同的道具。 this.setState({[this.state.meet]:event.target.checked}) 。 通過用方括號 [] 包裹 this.state.meet，您將使用 this.state.meet 的值作為道具名稱，在本例中為“false”，而不是“meet”。

沒有括號應該沒this.setState({meet:event.target.checked})

Answer 3

handleMeetCheckBox (event) {
  const { value, name } = event.target;
  this.setState({[name]: value})
}

printState () {
  console.log(this.state);
}


render(){
  return(
     <div>
        <input 
        type="checkbox" 
        name="meet" 
        checked={this.state.meet} 
        onChange={this.handleMeetCheckBox} 
        />

       Want to meet?<br />

       <input type="checkbox" name="secret" onChange=
        { this.handleMeetCheckBox} />

       Secret?

       <p>If 'Secret' then....</p><br />

       Subject:<input type="text" name="subject" onChange= 
              {this.handleMeetCheckBox}/><br /><br />

       Comments:<br /> <textarea name="comments" value=""  width="50"
           onChange={this.handleMeetCheckBox}/>

       <hr />

       <button type="button" onClick={this.printState}>Submit</button>
   </div>
        )
      }
     }