如何阻止事件在 React 中被进一步处理

Question

I have a text input in my React app which I don't want to take inputs which are greater than 100. For example, If the entered value is 105, an alert is created and the event is terminated ie changing input value is not gonna happen. Now I couldn't find a way to do this inside onChange function. Any help would be highly appreciated.

<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
  }
} 

Answer 1

Make it a controlled input and only set the value if a condition is met.

 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>

Answer 2

handleChange = e => {
  if(e.target.value > 100){
    alert("High");
    e.target.value = "";
  }
  else {
    // your normal processing
  }
} 

should work.

Explanation: Your code would simply not be executed in case the if condition is true. The line e.target.value = "" doesn't actually "not show" the users input (as asked for in comment), but rather overrides it with empty string.

Mention: This solution has nothing to do with React, but rather works in any context.

Answer 3

If I'm understanding you properly, if a specific condition is not met, you want to prevent the input from reflecting the text the user just entered.

In order to accomplish this, you'll need to control your input's value via state.

That means doing something like this:

<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})
}