Question

在输入onChange上使用type="checkbox"事件时，只需点击一下即可进行双击

<input 
     type="checkbox" 
     name="category[]" 
     id={listItems.id} 
     ref="category" 
     value={listItems.id} 
     onChange={this.formValueChange} 
     defaultChecked={creatorFormData.category[index]}
/>

并且在使用onClick事件时，根本不会选中复选框。

<input 
    type="checkbox" 
    name="category[]" 
    id={listItems.id} 
    ref="category" 
    value={listItems.id} 
    onClick={this.formValueChange} 
    defaultChecked={creatorFormData.category[index]}
/>

我可以在那里使用什么？

Answer 1

试试这个

<input type="checkbox" name="category[]" id={listItems.id} ref="category"
value={listItems.id} onChange={this.formValueChange.bind(this}
defaultChecked={creatorFormData.category[index]}/>

Answer 2

您可以使用状态值和已检查属性

轻松完成此操作

首先设置默认状态

this.state = {
    checkboxStatuses:[],
}

现在改变处理程序将是，

 formValueChange(index){
     let checkboxStatuses = [...this.state.checkboxStatuses];
     checkboxStatuses[index] = !checkboxStatuses[index]
     this.setState({checkboxStatuses:checkboxStatuses})
 }

更新类别时，您必须使用复选框的数量更新状态，等同于类别数

let category = []; if（this.props.stateValues.creatorData！= undefined＆amp;＆amp; this.props.stateValues.creatorData！=''）{ creatorFormData = this.props.stateValues.creatorData;

    this.setState({checkboxStatuses:[...creatorFormData].fill(false)});

    if (creatorFormData.categories != undefined && creatorFormData.categories != '') {
        category = creatorFormData.categories;
    } else if (creatorFormData.category == null) {
        creatorFormData.category = [];
    }
}

组件应该像，

 const categoryList = category.map((listItems,index) =>
  <div className="col-12 col-md-3" key={listItems.id}>
    <div className="selectmultibtn">

      <input type="checkbox" name="category[]" id={listItems.id} ref="category" value={listItems.id} onChange={(e)=>this.formValueChange(index)} defaultChecked={creatorFormData.category[index]}/>

      <label htmlFor={listItems.id}>{listItems.name}</label>
    </div>
  </div>

Answer 3

我正在使用类别数组

`let category = []; if（this.props.stateValues.creatorData！= undefined＆amp;＆amp; this.props.stateValues.creatorData！=''）{ creatorFormData = this.props.stateValues.creatorData; if（creatorFormData.categories！= undefined＆amp;＆amp; creatorFormData.categories！=''）{ category = creatorFormData.categories; } else if（creatorFormData.category == null）{ creatorFormData.category = []; } }

const categoryList = category.map((listItems,index) =>
  <div className="col-12 col-md-3" key={listItems.id}>
    <div className="selectmultibtn">
      <input type="checkbox" name="category[]" id={listItems.id} ref="category" value={listItems.id} onChange={this.formValueChange} defaultChecked={creatorFormData.category[index]}/>
      <label htmlFor={listItems.id}>{listItems.name}</label>
    </div>
  </div>
)`

使用＆＃34; onChange＆＃34;输入类型=＆＃34;复选框＆＃34;上的事件，单击工作并双击工作不起作用

3 个答案: