Question

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

这就是我现在所拥有的，但添加按钮非常适用 My dropdown 我有另一个输入字段，我可以将值传递给下拉列表，但当我尝试将逻辑实现到降档下拉列表时，没有任何反应。没有错误，没有价值！

这是我的代码：

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

感谢您的重播！

Answer 1

使用bootstrap下拉菜单，它看起来很好看查看也许你找到了一些东西

Check here there is diffrent model

反应，动态下拉降档

1 个答案: