如何解决react-select分离的重置按钮不适用于禁用的属性
我有这个搜索栏,它使用react-select,设计使我不得不创建一个分离的重置按钮。在用户开始输入之前,应该禁用此重置按钮,并且一旦用户单击它,它将重置搜索(显然)并返回到禁用状态。
我有此代码示例
class App extends React.Component {
constructor(props) {
super(props);
const options = [
{ value: "one",label: "One" },{ value: "two",label: "Two" },{ value: "three",label: "Three" },{ value: "four",label: "Four" },{ value: "five",label: "Five" }
];
this.state = {
select: {
value: null,options
},isDisabled: true
};
}
setValue = (value) => {
this.setState((prevState) => ({
select: {
...prevState.select,value
}
}));
};
handleChange = (value) => {
this.setValue(value);
this.setState({ isDisabled: false });
};
handleInputChange = (value) => {
if (value.length < 1) {
this.setState({ isDisabled: true });
}
if (value.length > 0) {
this.setState({ isDisabled: false });
}
};
handleClick = () => {
console.log('reset!'); ===> not happening!
this.setValue(null);
this.setState({ isDisabled: true });
};
render() {
const { select,isDisabled } = this.state;
return (
<div style={styles}>
<p>
<button type="button" onClick={this.handleClick} disabled={isDisabled}>
Reset value
</button>
</p>
<Select
name="form-field-name"
value={select.value}
onChange={this.handleChange}
onInputChange={this.handleInputChange}
options={select.options}
isSearchable={true}
isMulti
/>
</div>
);
}
}
链接到代码https://codesandbox.io/s/react-select-detached-reset-button-fqr74
按钮本身的状态很好,可以在适当的时候启用和禁用,但是它完全忽略了click事件,并且不会重置。如果删除disabled
属性,则单击事件有效,但随后我将失去按钮禁用状态。
有什么提示吗?
谢谢!
解决方法
问题为onInput一旦选择失去焦点并禁用按钮,就会调用InputChange。如果您已经选择了一些值,则会发生这种情况,因为值prop仍为空。只需在禁用按钮之前在输入中添加任何值的检查即可。
handleInputChange = (value) => {
if (value.length < 1) {
this.setState({ isDisabled: true });
}
//Check if SELECT has any value
if (value.length > 0 || !!this.state.select.value) {
this.setState({ isDisabled: false });
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。