Скрыть значение из одного раскрывающегося списка, если оно было выбрано ранее в reactjs - PullRequest
0 голосов
/ 27 мая 2020

У меня есть список элементов слева и раскрывающийся список справа. Мне нужно установить значение один к одному с элементами списка и значением раскрывающегося списка. Дело в том, что всякий раз, когда я выбираю одно раскрывающееся значение для одного элемента списка, он должен быть удален из раскрывающегося списка.

export default class MyComponent extends PureComponent {
  setFields = (e, i) => {
    const customers = [...this.state.customers];
    const otherCustomers = this.state.otherCustomers.filter(
      (qb) => qb._id === e.target.value
    );
    customers[i].customerId = e.target.value;
    const otherCustomers = this.state.otherCustomers.filter(
      (qb) => qb._id !== e.target.value
    );
    this.setState({ customers, otherCustomers });
  };
  render() {
    return (
      <div>
        {this.state.customers.map((d, i) => {
          return (
            <div key={i}>
              <ul>
                <li>
                  <p>{d.cName}</p>
                </li>
                <li>
                  <div>
                    <select
                      value={d._id}
                      onChange={(e) => this.setFields(e, i)}
                    >
                      <option value="">Select</option>
                      {otherCustomers.map((d1) => {
                        return (
                          <option value={d1._id} key={d1._id}>
                            {d1.name}
                          </option>
                        );
                      })}
                    </select>
                    <label>Customers Field</label>
                  </div>
                </li>
              </ul>
            </div>
          );
        })}
        ;
      </div>
    );
  }
}

Теперь проблема в том, что когда я удаляю этого выбранного клиента из списка, он также удаляет его из выбранного.

Итак, как я могу удалить его внутри самого рендера?

1 Ответ

1 голос
/ 27 мая 2020

Создайте две отдельные копии этого списка и привяжите этот список к раскрывающемуся списку.

После выбора одного значения в раскрывающемся списке слева отфильтруйте другой раскрывающийся список справа и привяжите эту обновленную копию к правая сторона.

...