我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时,我的文本消失了。 我尝试了
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,并且这些解决方案不起作用。
在提供的代码中,您正在使用“输入”,但没有声明它。你应该从 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)
};
它对我有用。