Как установить состояние указанного c объекта в массиве

Question

У меня есть список объектов в массиве, которые содержат пользовательские значения. Я хочу изменить конкретный объект c в зависимости от выбора пользователя. Чтобы быть более точным c, у меня есть таблица, для каждого пользователя есть свойство ischecked, которое по умолчанию имеет значение false. Я хочу, чтобы, когда пользователь нажимает на флажок, свойство isChecked меняется на true.

Вот моя функция, которая отображает данные таблицы.

// Display Table Data
  renderTableData = () => {
    return this.state.students.map((student, index) => {
      const { isChecked, name, age, email } = student; //destructuring
      return (
        <tr className={classes.tableRow} key={index}>
          <td className={classes.tableDataSpecial}>
            <div className={classes.content}>
              {" "}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={this.toggleCheckHandler}
              />
            </div>
          </td>
          <td className={classes.tableData}>{name}</td>
          <td className={classes.tableData}>{age}</td>
          <td className={classes.tableData}>{email}</td>
        </tr>
      );
    });
  };

Вот мое состояние

 state = {

    students: [
      { isChecked: false, name: "Wasif", age: 21, email: "wasif@email.com" },
      { isChecked: false, name: "Ali", age: 19, email: "ali@email.com" },
      { isChecked: false, name: "Saad", age: 16, email: "saad@email.com" },
      { isChecked: false, name: "Asad", age: 25, email: "asad@email.com" }
    ]
  };

, а вот моя toggleCheckHandler функция

toggleCheckHandler = e => {
    console.log(e.target);
  };

e.target дает мне DOM-контент. Итак, как нацелить этот указанный c объект.

Например, , я хочу установить для isChecked Wasif значение true, как мне это сделать?

Answer 1

Вы можете использовать параметр index вашей функции обратного вызова. Это может выглядеть примерно так:

// Display Table Data
  renderTableData = () => {
    return this.state.students.map((student, index) => {
      const { isChecked, name, age, email } = student; //destructuring
      return (
        <tr className={classes.tableRow} key={index}>
          <td className={classes.tableDataSpecial}>
            <div className={classes.content}>
              {" "}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={() => this.toggleCheckHandler(index)}
              />
            </div>
          </td>
          <td className={classes.tableData}>{name}</td>
          <td className={classes.tableData}>{age}</td>
          <td className={classes.tableData}>{email}</td>
        </tr>
      );
    });
  };

toggleCheckHandler = (index) => {
    const students = this.state.students;
    students[index].isChecked = !students[index].isChecked;
    this.setState({
        students: students
    });
};

Answer 2

Вы также можете передать любые данные, относящиеся к c ученику (весь объект «ученик», электронная почта или идентификатор этого ученика). Примерно так:

const { isChecked, name, age, email } = student; //destructuring
return (
  ...
  <input
    type="checkbox"
    checked={isChecked}
    onChange={()=>this.toggleCheckHandler(email)}
  />
  ...
)

toggleCheckHandler = email => {
 console.log(email); // or id
};

Тогда вы можете легко найти объект в массиве по электронной почте (или по идентификатору).