如何在反应选择中输入按键时防止选择值

Question

我试图在用户没有输入任何内容并按下回车键时阻止回车键选择。在当前情况下，当用户单击react-select 并按回车键然后从下拉列表中选择第一个值时，用户没有输入任何内容，但仍然从下拉列表中选择第一个值。有没有人有任何想法来阻止这个功能。

仅当用户在输入框中输入内容并选择或按回车键时才应选择。

这是一个简短的屏幕，用户没有输入任何内容，然后按 Enter 键，然后选择第一个值。

代码如下：

  import React from 'react';
  import Select from 'react-select';

  class CreateSelectOption extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        selected: this.props.options,
        questionsCount: props.questionsCount,
        inputValue: '',
    }
    this.processQuestions = this.processQuestions.bind(this);
}

componentWillReceiveProps(newProps) {
    if (newProps.questionsCount.length > 0) {
        this.setState({
            questionsCount: newProps.questionsCount
        })
    }
}

onChange = (e, props) =>{
    this.props.onChange(e, props.technology, props.id, props.type, props.noc, props.dataTech, props.dataType);
}

onInputValueChange = inputValue => {
    this.setState({ inputValue: this.allowOnlyOneSpace(inputValue) });
  };

allowOnlyOneSpace = str => {
    return str.endsWith(" ") ? str.trim() + " " : str.trim();
};

render() {
   
    const customStyles = {
        control: (styles, state) => ({
            ...styles,
            borderRadius: '1px', // default border color
            boxShadow: 'none', // no box-shadow
            color: '#007bff',
            height: '27px',
            minHeight: '30px'
        }),
        singleValue: (styles, state) => ({
            ...styles,
            color: '#007bff',
            top: '42%'
          }),
        dropdownIndicator: (styles, state) => ({
        ...styles,
        padding: "6px"
        }),
        menuPortal: base => ({ ...base, zIndex: 9999, fontSize: '12px' })
}
    const { selectedTech }=this.props;
    const selectedVal = selectedTech ? { value: selectedTech , label: selectedTech } : null;
    return(
    <Select
        className="select-width select-color"
        menuPortalTarget={document.body}
        styles={customStyles}
        value={selectedVal}
        onChange={(e) => { this.onChange(e, this.props) }}
        options={props.technologyArray && props.technologyArray.map(t => ({ value: t, label: t }))}
        openMenuOnClick={true}
        placeholder="Please select tech"
        components={{ IndicatorSeparator: () => null }}
        inputValue={this.state.inputValue}
        onInputChange={this.onInputValueChange}
        disabled={this.state.inputValue.length === 0}
        />
    )
}

} 导出默认 CreateSelectOption;

Answer 1

UPD options={this.state.inputValue.length === 0 ? [] : colourOptions}

Answer 2

试试这些属性

    openMenuOnFocus={false}
    openMenuOnClick={false}

我猜（虽然现在无法检查）这也是有效的（如果 selectedVal 存在，则它变为 true else false）

    openMenuOnFocus={selectedVal}
    openMenuOnClick={selectedVal}