Question

我的用户抱怨说，即使情况并非完全如此，他们也可以输入新值（选项中未包含的一个值）。

当您输入文本时，如果不选择任何选项然后不键入内容，则文本会停留在该位置，这使用户认为可以输入新值（选项中未包含的值）。

解决这个问题的正确方法是什么？我是前端开发的新手，所以答案实际上可能很明显。

Answer 1

解决此问题的一种方法是在用户模糊输入时清除预输入，除非他们做出了有效的选择。这是一个示例：

class BlurryTypeahead extends React.Component {
  state = {
    selected: [],
  };

  render() {
    return (
      <Typeahead
        onBlur={this._handleBlur}
        onChange={this._handleChange}
        options={['one', 'two', 'three']}
        ref={typeahead => this._typeahead = typeahead}
        selected={this.state.selected}
      />
    );
  }

  _handleBlur = () => {
    // Check if there are selections.
    if (!this.state.selected.length) {
      // Clear the component if not.
      this._typeahead.getInstance().clear();
    }
  }

  _handleChange = (selected) => {
    // Track the selected state
    this.setState({ selected });
  }
}

TypeAhead与allowNew = false脱离焦点时会留下输入文本

1 个答案: