Question

我有一个reactjs自定义下拉组件，其中包含移动设备列表。

最初会渲染三个组件实例。
我想从其他下拉菜单中删除所选的手机

例如，假设移动主列表包含Apple，诺基亚，三星和OnePlus。

如果在第一个下拉列表中选择“诺基亚”，然后在第二个下拉列表中，则应从列表中看到手机，但没有诺基亚。

第一个下拉列表-诺基亚，苹果，三星，OnePlus（已选择->诺基亚）
第二个下拉菜单-Apple，三星，OnePlus（已选择-> Apple）
第三下拉菜单-三星，OnePlus

Answer 1

您可以将下拉菜单的状态保持不变，并为每个下拉菜单的状态保持不同状态

Answer 2

我会这样处理

1。拥有一个可渲染3个下拉子组件的父容器。

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            child1: ['samsung', 'sony'],
            child2: ['samsung', 'sony'],
            child3: ['samsung', 'sony'],
        }
    }
    render() 
       return( 
          <div> // see below for handleSelect function
             <Dropdown onSelect={this.handleSelect.bind(this)} selectables={this.state.child1} />
             <Dropdown onSelect={this.handleSelect.bind(this)} selectables={this.state.child2} />
             <Dropdown onSelect={this.handleSelect.bind(this)} selectables={this.state.child3} />
          <div>
        )
 }

2。在父容器中，创建一个函数，该函数将在选择子项的下拉选项时触发。例如）

// In parent container
handleSelect(object) {
    // Do logic here. 
    // e.g. if the first child selects an option by
    if (object.selectedChild === 'FIRST') 
        const selected = object.selected;
        // remove selected from an array
        this.setState({ ... update the second dropdown selectables });
}

// In child component. Call this when option is selected
handleSelect(value) {
    const obj = { selectedChild: 'FIRST' , selected: value };
    this.props.onSelect(obj); // call parent function
}

3。当孩子打电话时

this.props.onSelect(obj)

它将相应地更新父级中的状态，并在重新渲染时将更新后的道具传递给子级

然后，孩子将使用更新的可选对象重新渲染。

Answer 3

我只能以状态形状来帮助您。组件处理应该是您自己的工作。

您可以为下拉菜单使用共享状态。您将在其中存储一系列项目并跟踪所选项目的位置。

例如在容器中的某处：

state = {
  data: [
   {
    name: 'Nokia',
    selected: false,
   },
   {
    name: 'Apple',
    selected: false,
   },
   {
    name: 'OnePlus',
    selected: false,
   }
  ]
}

在您的下拉组件内部，使用.filter()对此数组进行简单过滤，如下所示：

this.state.data.filter((item) => !item.selected)

处理选择逻辑和下拉标签的选定项目应该没有问题。

ReactJS组件状态下拉列表未更新

3 个答案: