所有複選框都在點擊

Question

檢查我是相當新的反應，我想創建一個簡單的形式。表單應用程序有很多元素，包括3複選框。爲了簡化我的問題，我只顯示覆選框。在這裏我在做什麼

1. 當我點擊複選框，標籤的價值將被推 到一個數組中，並保存到App狀態。
2. 我使用event.target.name，因爲我已經在 形式多個輸入和我想保持以防萬一，使我的問題更加 描述。
3. 當我點擊提交，就應該清除該複選框。

問題是，當我點擊複選框時，所有3的獲取檢查，它將不會在點擊提交後被清除。有什麼辦法可以解決這個問題嗎？或爲什麼發生？

function CheckBox(props) { 
 
var style= { 
 
    padding:10, 
 
    marginLeft:5 
 
} 
 
    return(
 
    <div style={style} > 
 
     {props.checkboxList.map((item,index) => 
 
     <div key={index}> 
 
     <input type="checkbox" 
 
      onChange={props.changeHandler} 
 
      checked={props.checkStatus} name={props.name} value={item.val} /> 
 
      <label>{item.num}) {item.val}</label> 
 
     </div>)} 
 

 
    </div> 
 

 
    ) 
 
} 
 

 
class App extends React.Component{ 
 
    constructor(props) { 
 
    super(props); 
 
    this.state={item:[],checked:false} 
 
    this.changeHandler=this.changeHandler.bind(this) 
 
    this.submitHandler=this.changeHandler.bind(this) 
 
    } 
 

 
changeHandler(event) { 
 
    if(event.target.name=="choice") {  
 
    var arr=this.state.item.slice() 
 
    arr.push(event.target.value) 
 
    this.setState({item:arr, checked:event.target.checked},()=> console.log(this.state.item +"--"+ this.state.checked)) 
 
    } 
 
    else{ console.log('error')} 
 
} 
 
    
 
submitHandler(){ 
 
     this.setState({item:[],checked:false}) 
 
    } 
 
    
 
render() { 
 
    return(
 
    <div> 
 
    <CheckBox checkboxList={[ 
 
       {num:"a", val:"choice 1"}, 
 
       {num:"b", val:"choice 2"}, 
 
       {num:"c", val:"choice 3"}]} changeHandler={this.changeHandler} name="choice" checkStatus={this.state.checked} /> 
 
     <button onClick={this.submitHandler}>Submit</button> 
 
    </div> 
 
) 
 
} 
 
} 
 
ReactDOM.render(
 
    
 
    <App/>, 
 
    
 
    document.getElementById("root") 
 

 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 1

的主要做法是國家重點添加到每個複選框：

constructor(props) { 
    super(props); 
    this.state={item:[],checked:{}} 
    this.changeHandler=this.changeHandler.bind(this) 
    this.submitHandler=this.submitHandler.bind(this) 
    } 

changeHandler(event) { 
    if(event.target.name=="choice") {  
    var arr=this.state.item.slice() 
    arr.push(event.target.value) 
    this.setState({item:arr, checked:{ 
    ...this.state.checked, 
    [event.target.value]: event.target.checked 
}},()=> console.log(this.state.item +"--"+ this.state.checked)) 
    } 
    else{ console.log('error')} 
} 
submitHandler(){ 
     this.setState({item:[],checked:{}}) 
    } 

和複選框：

{props.checkboxList.map((item,index) => 
    <div key={index}> 
    <input type="checkbox" 
     onChange={props.changeHandler} 
     checked={props.checkStatus[item.val]} name={props.name} value={item.val} /> 
     <label>{item.num}) {item.val}</label> 
    </div>)}