Javascript 反应，动态降档

我是个新手，我正在尝试创建一个下拉列表，用户可以在下拉列表中添加值。像这样的

这是我现在得到的，但是添加按钮根本不起作用 我有另一个输入字段，我可以将值传递给下拉列表，但是当我尝试实现降档下拉列表的逻辑时，什么都没有发生。没有错误，没有价值

这是我的密码：

function BasicAutocomplete({ items, onChange }) {
  return (
    <Downshift
      onChange={onChange}
      render={({
        getInputProps,
        getItemProps,
        isOpen,
        inputValue,
        selectedItem,
        highlightedIndex,
        handleSubmit
      }) => (
          <div>
            <Input {...getInputProps({ placeholder: 'Markedsaktivitet'}) } ref="input"  />
            {isOpen ? (
              <div style={{ border: '1px solid #ccc' }}>
                {items
                  .filter(
                  i =>
                    !inputValue ||
                    i.toLowerCase().includes(inputValue.toLowerCase()),
                )
                  .map((item, index) => (
                    <div
                      {...getItemProps({ item }) }
                      key={item}
                      style={{
                        backgroundColor:
                          highlightedIndex === index ? 'gray' : 'white',
                        fontWeight: selectedItem === item ? 'bold' : 'normal',
                      }}
                    >
                      { item }
                    </div>
                  ))}
                <Button type="button" onClick={handleSubmit}><i className="fa fa-plus" /> Add option</Button>
              </div>
            ) : null}
          </div>
        )}
    />
  )
}

class Dropdown extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputField: 'no value',
      items: ['apple', 'orange', 'carrot']
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    const newItem = this.refs.input.value
    this.setState({ items: this.state.items.concat(newItem) })
  }

  render() {
    return (
      <Wrapper>
        <BasicAutocomplete
          items={this.state.items}
          onChange={selectedItem => console.log(selectedItem)}
          onClick={this.handleSubmit}
          />
      </Wrapper>
    );
  }
}

函数基本完成（{items，onChange}）{
返回(
(
{isOpen(
{项目
.过滤器(
i=>
！输入值||
i、 toLowerCase（）.includes（inputValue.toLowerCase（）），
)
.map（（项目、索引）=>(
{item}
))}
添加选项
)：null}
)}
/>
)
}
类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
inputField:'无值'，
商品：[‘苹果’、‘橘子’、‘胡萝卜’]
}
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（）{
const newItem=this.refs.input.value
this.setState（{items:this.state.items.concat（newItem）}）
}
render（）{
返回(
console.log（selectedItem）}
onClick={this.handleSubmit}
/>
);
}
}

---

谢谢你的重播

使用bootstrap下拉菜单它看起来很漂亮 退房 也许你会发现一些东西

---

您将一个名为onChange的道具传递给BasicAutoComplete组件，该道具包含一个接受参数的方法，但在降档组件中，您将道具设置为降档的onChange属性，但没有指定任何参数，请检查这是否是问题。似乎handleSubmit无法到达BasicAutocomplete函数中的输入