redux onBlur重置react-select中的值

vwoqyblh  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(168)

我有问题的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表单的解决方法?
同样的问题,如here,但我没有使用redux形式,这些解决方案不工作。

tyky79it

tyky79it1#

在提供的代码中,您使用了'input',但没有声明它的位置。您应该从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)
};

对我很有效。

相关问题