Question

我反应很新，我试图创建一个简单的表单。表单应用程序包含许多元素，包括3复选框。为了简化我的问题，我只显示了复选框。这就是我正在做的事情

单击复选框时，将按下标签的值进入数组并保存到App状态。
我使用event.target.name因为我有多个输入形式，我想保持以防万一我的问题更多描述性的。
当我点击提交时，应清除该复选框。

问题是，当我点击复选框时，所有3个被选中，并且在点击提交后它不会被清除。有没有办法克服这个问题？或者为什么会发生？

＆＃13;

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

＆＃13;

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

＆＃13;

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

单击后将选中所有复选框

1 个答案: