Question

如何在react中获得多个选中的复选框值？选中的复选框位于 bootstrap 模式中。

我尝试使用状态获取复选框值，但是它不起作用。

要打开 bootstrap 模式：

<a
  variant="primary"
  onClick={this.handleShow}
  style={{ cursor: 'pointer', fontWeight: '700', fontSize: '16px' }}
>
  <b>Choose Employee Under Him/Her</b>
</a>

引导程序模态的主体，并带有以下复选框：

<Modal.Body>
  <div class="form-group" id="sampleTableForEmployee">
    <table className="table table-hover table-bordered" id="sampleTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Employee ID</th>
          <th>Select</th>
        </tr>
      </thead>
      <tbody>
        {(() => {
          if (this.state.allemployees && this.state.allemployees.length > 0) {
            return this.state.allemployees.map(employee => (
              <tr key={employee.empmainid}>
                <td>{employee.empname}</td>
                <td>{employee.empid}</td>
                <td>
                  <input
                    onChange={this.handleCheckbox}
                    className=""
                    type="checkbox"
                    name="allemployyes1[]"
                    value={employee.empmainid}
                  />
                </td>
              </tr>
            ));
          } else {
            return (
              <tr>
                <td colSpan="3" className="text-center" style={{ color: 'red', fontSize: '20px' }}>
                  Sorry, There are no employees under the selected department
                </td>
              </tr>
            );
          }
        })()}
      </tbody>
    </table>
  </div>
  <div className="form-group">
    <button
      type="submit"
      className="btn btn-primary pull-right"
      id="btnContactUs"
      onClick={this.handleHide}
    >
      DONE
    </button>
    <br />
    <br />
  </div>
</Modal.Body>

我已经定义了this.state = {allemployees1: []}

处理复选框的方法：

handleCheckbox(event, isChecked, value) {
  var newArray = this.state.allemployyes1.slice();
  newArray.push(event.target.value);
  this.setState({ allemployyes1: newArray });
  console.log(this.state.allemployyes1);
}

Answer 1

您应该更新点击事件功能和渲染方法。

// The event handle function takes only one argument
handleCheckbox(event) {
    const {value, checked} = event.target; // get id and checked status
    var allemployyes1 = this.state.allemployyes1.slice();

    // Add to an array if checked and remove - if uncheck
    if (checked) {
        allemployyes1.push(value);
    } else {
        allemployyes1 = allemployyes1.filter(id => id !== value);
    }

    this.setState({ allemployyes1: allemployyes1 });
}


// You should set the checked status to the checkbox via checked attr
<tbody>
    {(() => {
        if (this.state.allemployees && this.state.allemployees.length > 0) {
            return (this.state.allemployees.map((employee) => (
                <tr key={employee.empmainid}>
                    <td>{employee.empname}</td>
                    <td>{employee.empid}</td>
                    <td><input onChange={this.handleCheckbox} className="" type="checkbox" name={employee.empmainid} value={employee.empmainid} checked={this.state.allemployyes1.includes(employee.empmainid)} /></td>
                </tr>))
        } else {
            return (
                <tr>
                    <td colSpan="3" className="text-center" style={{ color: 'red', fontSize: '20px' }}>Sorry, There are no employees under the selected department</td>
                </tr>
            )
        }
    })()}
</tbody>

此代码应正常运行。

如何在反应中获得引导模态多个复选框的值？

1 个答案: