所有复选框都在点击

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