Как получить загрузочное значение модального множественного флажка в реагировать? - PullRequest
Новая
       17

Как получить загрузочное значение модального множественного флажка в реагировать?

0 голосов
/ 24 июня 2019

Как я могу получить значение нескольких отмеченных флажков в реагировать?Установленные флажки находятся в модальности 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);
}

1 Ответ

0 голосов
/ 24 июня 2019

Вам следует обновить функцию события click и метод визуализации. 

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

Этот код должен заработать.

...