Как сохранить список выбранного компонента в массиве состояний в реаги

Question

У меня есть таблица, например, 10 строк, в каждой строке есть компонент select.

Как сохранить все выбранные элементы из всех 10 строк в массиве в таком состоянии, чтобы они были такими же, как у этого [{"cid":11,"id":2},{"cid":11,"id":3}] ??

Я сделал это здесь https://codesandbox.io/s/amazing-shannon-sewln но с небольшой проблемой ... когда я выбираю выбор, он всегда добавляет к массиву, даже если у той же строки есть предыдущий выбор ..

Мне нужен новый выбор для той же строки, чтобы переопределить старый выбор, чтобы не добавлять новую запись

Answer 1

Обновление onSelectGrade, Создать массив элементов с идентификатором и значением. При изменении проверьте, существует ли тот же элемент (имеется в виду, выбранный ранее), затем обновите, иначе создайте новый (pu sh в массиве).

рабочий образец оформления заказа: https://codesandbox.io/s/billowing-feather-cl0by

onSelectGrade(e) {
    console.log(e.target.id);
    const selectedGrades = [...this.state.selectedGrades];
    const grade = selectedGrades.find(x => x.id === e.target.id);
    if (grade) grade.value = e.target.value;
    else selectedGrades.push({ id: e.target.id, value: e.target.value });
    this.setState(
      {
        selectedGrades
      },
      () => {
        console.log(this.state);
      }
    );
  }

Answer 2

Вам необходимо использовать {} в качестве значения состояния, а затем отформатировать его в нужный формат (т. Е. Массив)

https://codesandbox.io/s/gifted-hopper-ov10z

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedGrades: {}
    };
    this.onSelectGrade = this.onSelectGrade.bind(this);
  }
  onSelectGrade(e) {
    console.log(e.target);
    this.setState(
      {
        selectedGrades: {
          ...this.state.selectedGrades,
          [e.target.id]: e.target.value
        }
      },
      () => {
        console.log(this.state);
      }
    );
  }

  getOuput = () => {
    return Object.keys(this.state.selectedGrades).map(key => {
      console.log(key);
      return { id: key, cid: this.state.selectedGrades[key]};
    });
  };

  render() {
    console.log("required output", this.getOuput());
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <table>
          <tr>
            <th>Country</th>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="22"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="23"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="24"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="25"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
        </table>
      </div>
    );
  }
}