Реакция: OnSelect и OnSubmit в автозаполнении компонента, чтобы оба реагировали на Enter - PullRequest
Новая
       8

Реакция: OnSelect и OnSubmit в автозаполнении компонента, чтобы оба реагировали на Enter

0 голосов
/ 30 ноября 2018

Я пытаюсь настроить компонент автозаполнения: 

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

Все работает нормально, и мне нравится, что если я нажму клавишу ввода, автозаполнение автоматически заполнит поле ввода наиболее подходящим тегом.Однако я хотел бы снова нажать клавишу ввода, а затем вызвать функцию (скажем, onSubmit) и сохранить этот тег где-нибудь как отправленный тег.Это, похоже, не работает, так как нажатие клавиши Enter теперь подключено к onSelect - как я могу решить эту проблему?

PS: я использую этот компонент автозаполнения: React-Autocomplete Пример JS Bin

...