Question

我必须在react中创建一个选择菜单，但是还需要一些额外的功能，而这些功能我在google的前50个链接中都找不到。（我不是在搜索正确的事情，显然会导致idk所谓的错误。）

详细信息：

选择菜单，一旦选择了某个项目，该菜单将其携带到选择菜单的下方，因此可以进一步操作该项目。例如，我想要选择多种成分，然后按选择的顺序将它们显示在同一页面上，然后能够在文本字段中输入已选择成分旁边的数量。

过程：

选择辣椒粉（从辣椒粉中删除辣椒粉，因为无需再次选择它）>看到辣椒粉出现在选择菜单的下方，然后在与后端相关的文本字段中输入辣椒粉的数量>对其他配料重复上述操作。

任何帮助将不胜感激。即使您只告诉我要用Google做什么。

谢谢大家

马特

Answer 1

我将有一个状态存储的数组，其中包含所有选定的成分，每次选择新成分（使用!-------------------------------------------------------------------------------------------------- ! FILE mod_myderclass.f90 !> @brief Definition of derived class myderclass !! @file mod_myderclass.f90 !-------------------------------------------------------------------------------------------------- !-------------------------------------------------------------------------------------------------- ! MODULE mod_myderclass !> @brief Define derived class myclass !-------------------------------------------------------------------------------------------------- MODULE mod_myderclass USE mod_myclass IMPLICIT NONE !-------------------------------------------------------------------------------------------------- ! CLASS myderclass !> @brief derived class myderclass !-------------------------------------------------------------------------------------------------- TYPE, EXTENDS(Myclass) :: Myderclass END TYPE END MODULE时都会更新该数组。然后，我将简单地使用此数组来影响页面其余部分上显示的内容。

Answer 2

我试图用JSFiddle编写它，但是它对我产生了麻烦。...这应该是一个与乔斯提到的方法相同的 Almost 工作示例。我认为您将能够从中获得灵感

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

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

2 个答案: