如果之前在 reactjs 中被选中，则从一个下拉列表中隐藏值答案

【问题标题】：Hide value from one dropdown if gets selected previously in reactjs如果之前在 reactjs 中被选中，则从一个下拉列表中隐藏值
【发布时间】：2020-09-14 02:38:44
【问题描述】：

我在左侧有项目列表，在右侧有下拉菜单。我需要使用列表项和下拉值设置一对一的值。所以事情是每当我为一个列表项选择一个下拉值时，它应该从下拉列表中删除。

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>
    );
  }
}

现在的问题是，当我从列表中删除该选定客户时，它也将其从选定客户中删除。

那么如何在渲染器中移除它呢？

【问题讨论】：

需要过滤掉选项，显示相关代码
@Vaibhav 更新了我的代码

标签： javascript reactjs select drop-down-menu

【解决方案1】：

创建该列表的单独两个副本并将该列表绑定到下拉列表。

从左侧下拉列表中选择一个值后，过滤掉另一个右侧下拉列表并将此更新的副本绑定到右侧。

【讨论】：