Question

我正在尝试设置一个自动完成组件：

const tags = [ 'foo', 'bar' ];

export default class AutoComplete extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: '',
    }
  }

  onSubmit() {
    console.log("SUBMITTED");
    console.log(this.state.value);    
    this.setState({value: ''});

  }

  render() {
    console.log("STATE");

    console.log(this.state);

    return (
      <ReactAutocomplete
        items={tags}
        shouldItemRender={(item, value) => item.toLowerCase().indexOf(value.toLowerCase()) > -1}
        getItemValue={item => item}
        renderItem={(item, highlighted) =>
          <div
            key={item}
            style={{ backgroundColor: highlighted ? '#eee' : 'transparent'}}
          >
            {item}
          </div>
        }
        value={this.state.value}
        onChange={e => this.setState({ value: e.target.value })}
        onSelect={value => { this.setState({ value });}}
        onSubmit={this.onSubmit.bind(this)}
      />
    )
  }
}

一切正常，我喜欢按Enter键，自动完成功能会自动用最合适的标签填充输入字段。但是，我想再次按Enter，然后调用一个函数（例如onSubmit）并将该标签保存为提交的标签。不过，这似乎不起作用，因为按Enter键现在已钩接到onSelect-我该如何解决？

PS：我正在使用此自动完成组件： React-Autocomplete JS Bin Example

反应：自动完成组件中的OnSelect和OnSubmit都对Enter做出反应

0 个答案: