[英]Hide value from one dropdown if gets selected previously in reactjs
我在左側有項目列表,在右側有下拉列表。 我需要使用列表項和下拉值設置一對一的值。 所以事情是每當我 select 為它應該從下拉列表中刪除的一個列表項的一個下拉值。
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>
);
}
}
現在的問題是,當我從列表中刪除選定的客戶時,它也會從選定的客戶中刪除。
那么我怎樣才能在渲染本身中刪除它呢?
創建該列表的單獨兩個副本並將該列表綁定到下拉列表。
從左側下拉列表中選擇一個值后,過濾掉另一個右側下拉列表並將此更新的副本綁定到右側。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.