时间戳

首页 > 解决方案 > React select v2 on space press 选择第一个值

javascript - React select v2 on space press 选择第一个值

问题描述

在选择字段时，我点击空格，选择选项中的第一个值。如何禁用这种行为？

<Select
  ref={r => (this.selectRef = r)}
  className="basic-single"
  classNamePrefix="select"
  onInputChange={val => {
    console.log('va', val)
    this.setState({ inputValue: val })
    }}
  inputValue={this.state.inputValue}
  options={[{ value: 'aaa', label: 'aaa bbb' }, { value: 'bbb', label: 'bbb ccc' }]}
  name="color"
/>

这是一个演示

标签： javascriptreactjsreact-select

解决方案

我建议使用onKeyDown道具并在使用按空格键时阻止该动作，因此不会选择任何内容。

<Select
   ref={r => (this.selectRef = r)}
   className="basic-single"
   classNamePrefix="select"
   onInputChange={val => {
     this.setState({ inputValue: val });
   }}
   onKeyDown={e => {
     if (e.keyCode === 32 && !this.selectRef.state.inputValue) e.preventDefault();
   }}
   inputValue={this.state.inputValue}
   options={[
     { value: "aaa", label: "aaa bbb" },
     { value: "bbb", label: "bbb ccc" }
   ]}
   name="color"
 />

现场示例在这里。

推荐阅读