我的React应用程序中有一个文本输入，我不想接受大于100的输入。例如，如果输入的值是105，则会创建警报并终止事件，即不会发生更改输入值的情况。现在我在onChange函数中找不到这样做的方法。如有任何帮助，我们将不胜感激。
<input onChange={handleChange} name="t"/>
handleChange = e => {
if(e.target.value > 100){
alert("High")
//Here I want to stop event so that changing text in the input doesn't happen
}
}
如果我理解得很好，如果不满足特定条件，您希望防止输入反映用户刚刚输入的文本。
为了实现这一点，您需要通过状态来控制输入的值。
这意味着要做这样的事情：
<input onChange={handleChange} name="t" value={this.state.tInput}/>
handleChange = e => {
if(parseInt(e.target.value) > 100) {
alert("High")
// set input state here to previous value to re-render and remove unwanted input values from input
return this.setState(({tInput}) => ({tInput}))
}
return this.setState({tInput: e.target.value})
}
将其作为受控输入，仅在满足条件时设置值。
const App = () => {
const [value, setValue] = React.useState("");
const handler = (e) => {
const value = Number(e.target.value);
value <= 100 && setValue(value);
};
return (
<input onInput={handler} type="number" value={value} />
);
}
ReactDOM.render(<App/>, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>handleChange = e => {
if(e.target.value > 100){
alert("High");
e.target.value = "";
}
else {
// your normal processing
}
}
应该起作用。
解释：如果if条件为true，您的代码将不会执行。e.target.value = ""行实际上并没有"不显示"用户输入(正如注释中所要求的那样(，而是用空字符串覆盖它。
提及：此解决方案与React无关，而是适用于任何上下文。