node.js - React 选择菜单 - 选择多个项目 - 高级

Question

我必须在 React 中创建一个选择菜单，但它还需要几个额外的功能，但我在 google 的前 50 个链接中找不到。 (我没有在谷歌上搜索正确的东西，显然导致我不知道它叫什么)。

详细信息:

选择菜单，一旦选择了某个项目，该项目就会远低于选择菜单，以便可以进一步操作该项目。例如，我想选择多种成分，然后将它们按选择顺序显示在同一页面上，然后能够在已选择成分旁边的文本字段中输入数量。

流程:

选择辣椒粉(从选择菜单中删除辣椒粉，因为无需再次选择它)> 看到辣椒粉出现在选择菜单下方远下方 > 在绑定(bind)到后端的文本字段中输入辣椒粉的量 > 对其他成分重复此操作。

任何帮助将不胜感激。即使你只是告诉我要谷歌搜索什么。

谢谢大家，

马特

Answer 1

我试图在 JSFiddle 中写下这个，但它让我失败了......这应该是一个几乎工作示例，采用与 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')
);