Как получить данные из таблицы в состояние

Question

Я пытаюсь создать таблицу, которая, как только вы щелкнете по ней, обновит состояние с информацией из таблицы, но я не знаю, как это сделать

Это мой код:

state = {
    shift: {
      id: '',
      shift: '',
      date: ''
    },
    days: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday'
    ],
    shifts: ['Morning', 'Evening']
  };
  render() {
    const table = this.state.shifts.map((shift, index) => {
      return (
        <tr key={index}>
          {this.state.days.map((day, index2) => {
            return (
              <td key={index2}>
                <div>{day}</div>
                <div>{shift}</div>
                <div>
                  <button>Sign in</button>
                </div>
              </td>
            );
          })}
        </tr>
      );
    });

Я хочу написать функцию onClick, чтобы, как только я нажимал кнопку, я хотел, чтобы this.state.shift обновлялось утром / вечером, когда TD содержит его, и то же самое для * 1007.* будет добавлено в день воскресенье / понедельник ... кто-нибудь знает, как это сделать?

Answer 1

В вашем <td> вы можете поместить

onClick={event => this.setState({shift: {id: '', shift, date: day})} Положите все, что вы хотите, чтобы id было, а shift - это просто деструктурированный объект.

Япри условии, что вы имели в виду this.state.shift.shift и this.state.shift.date.