Node.js 反应选择菜单-选择多个项目-高级

我必须在react中创建一个选择菜单，但它还需要一些额外的功能，我在google的前50个链接中找不到这些功能。（我没有在谷歌上搜索正确的东西，显然是因为idk的名字）

详情：

一种选择菜单，一旦选择了一个项目，它将该项目放在选择菜单的下方，以便进一步操作该项目。例如，我希望选择多个配料，然后按选择顺序将其显示在同一页面上，然后能够在已选择配料旁边的文本字段中输入数量

过程：

选择辣椒粉（从选择菜单中删除辣椒粉，因为无需再次选择）>参见选择菜单下方的辣椒粉>在绑定到后端的文本字段中输入辣椒粉量>重复其他成分

任何帮助都将不胜感激。即使你只是告诉我谷歌应该做什么

谢谢大家,

---

Matt

我将有一个存储在状态中的数组，该数组将包含所有选定的成分，每次选择新成分时都会更新该数组（使用

onChange

）。然后，我会简单地使用这个数组来影响页面其余部分显示的内容。

我试图在JSFIDLE中编写这个，但我被它绊倒了。。。。这里应该有一个与Joss提到的方法相同的几乎工作示例。我想你会从中得到灵感的

class Demo extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        selected: [],
    };
  }

  select(e) {
    const { value } = e.currentTarget;
    let { selected } = this.state;
    if(selected.contains(value)) {
        selected = selected.filter((val) => val !== value);
    } else {
        selected.push(value);
    }
    this.setState({
        selected,
    });
  }

  render() {
    const ret = []; //Just using this to map over to create options
    for(i = 0; i < 5; i++) {
        ret.push(i);
    }

    return (
    <div className="container">
    { ret.map((i)=>(
      <div
          onclick={this.select}
          value={i}
          className={this.state.selected.contains(i) ? 'selected' : null}>
            {i}
          </div>
      )}
    </div>
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);

类演示扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选定：[]，
};
}
选择（e）{
const{value}=e.currentTarget；
设{selected}=this.state；
如果（选中。包含（值））{
选中=选中。筛选器（（val）=>val！==value）；
}否则{
选择。推送（值）；
}
这是我的国家({
挑选出来的，
});
}
render（）{
const ret=[]；//只需使用此映射来创建选项
对于（i=0；i<5；i++）{
再推（i）；
}
返回(
{ret.map（（i）=>(
{i}
)}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

谢谢！所以我必须将所选项目推送到数组中？数组可能是最简单的方法，但可能不是最有效的。也有一些方法可以通过对象/贴图来实现。不过，效率差别不大