onBlur 重置反应选择中的值

Question

我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时，我的文本消失了。我尝试过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 的解决方法？

与这里相同的问题，但我没有使用 redux-form 并且这些解决方案不起作用。

Answer 1

在提供的代码中，您正在使用“输入”，但没有声明它。你应该从 props 传递它。

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

这对我有用。