模糊验证在输入选择填充数据字段之前触发 - ReactJS

Question

以下是我的国家/地区选择器下拉列表，一旦用户聚焦输入字段，它就会弹出。我已经做了一个验证onBlur因为数据不能在输入字段中保持为空。问题在于从列表中选择值onBlur立即触发，然后将值填充到下拉列表中onBlur这会导致屏幕上出现验证消息。

让我知道如何在用户从列表中选择值后通过删除onBlur验证来管理这种情况。

反应代码 -

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
blurText: "Field Cannot be left blank",
listData: [],
selectedValue: "",
showList: false,
showBlurText: false
};
}
componentDidMount() {
this.setState({
listData: [
{ id: 1, name: "Australia" },
{ id: 2, name: "Germany" },
{ id: 3, name: "France" }
]
});
}
handleBlur = e => {
if (!e.target.innerHTML) {
this.setState({
showBlurText: true
});
} else {
this.setState({
showBlurText: false
});
}
};
showDataList = () => {
this.setState({
showList: true
});
};
handleSelection = e => {
this.setState({
selectedValue: e.target.innerHTML
});
};
handleChange = e => {
this.setState({ selectedValue: e.target.value });
};
render() {
return (
<div className="App">
<h3>Test Select</h3>
<input
type="text"
name="autosuggest"
value={this.state.selectedValue}
onFocus={this.showDataList}
onBlur={this.handleBlur}
onChange={this.handleChange}
/>
{this.state.showList && (
<ul>
{this.state.listData.map(x => {
return (
<li key={x.id} onClick={this.handleSelection}>
{x.name}
</li>
);
})}
</ul>
)}
<hr />
{this.state.showBlurText && (
<p style={{ color: "red" }}>{this.state.blurText}</p>
)}
</div>
);
}
}

使用场景工作代码沙盒 - https://codesandbox.io/s/charming-brook-h7kin

Answer 1

我有一个解决方案，你可以检查这个链接： 代码沙盒：点击模糊上的捕手

问题是您将onBlur道具放在输入元素上，因此当您单击ul 元素中的项目时，onBlur会被触发。

所以我所做的是创建一个简单的点击捕捉器，这样当你在输入或ul之外点击时，它就会被触发。

希望这有帮助。

Answer 2

而不是使用 onBlur，您可以检查 onChange 事件的验证，在此处检查工作沙箱

下面的一些提示将使您的代码干净：

在验证空字段时不使用 if-else，您可以直接使用 ！(否定运算符(在你的句柄模糊函数中。

handleBlur = e => {
this.setState({
showBlurText: !e.target.innerHTML
})
}