Question

我对react-select有问题。当我在可搜索输入中键入一些文本并在外部单击时，我的文本消失了。我尝试了onBlur={() => input.onBlur({value: input.value})}，但工作正常，但控制台出现了难看的错误。像Uncaught ReferenceError: input is not defined之类的东西。

onChangeValue = (newValue) => {
  const inputValue = newValue.replace(/\W/g, '');
  this.setState({ inputValue });
  this.props.nameFilter(inputValue);
};

handleCloseMenu = () => {
  this.setState(({
    menuIsOpen: false,
  }))
  input.onBlur(input.value)
};

handleOpenMenu = () => {
  this.setState(({
    menuIsOpen: true,
  }))
  input.onBlur(input.value)
};

render() {
  return (
   <div className="container">
    <AsyncSelect 
      className="search-input"
      onFocus={this.handleOpenMenu}
      onBlur={this.handleCloseMenu}
      menuIsOpen={this.state.menuIsOpen}
      loadOptions={this.loadOptions}
      defaultOptions
      onInputChange={this.onChangeValue}
      placeholder="Search..."
    />
  </div>    
  )};
};

有没有使用redux-form的解决方法？

与here 类似的问题，但是我没有使用redux-form，这些解决方案不起作用。

Answer 1

在提供的代码中，您正在使用'input'，但没有在声明它的位置使用。您应该通过道具传递它。

handleCloseMenu = (props) => {
  const { input, options } = props;
  this.setState(({
    menuIsOpen: false,
  }))
  input.onBlur(input.value)
};

handleOpenMenu = (props) => {
  const { input, options } = props;
  this.setState(({
    menuIsOpen: true,
  }))
  input.onBlur(input.value)
};

对我有用。

onBlur重置react-select中的值

1 个答案: