Как остановить дальнейшую обработку события в React - PullRequest
Новая
       17

Как остановить дальнейшую обработку события в React

0 голосов
/ 25 октября 2019

У меня есть текстовый ввод в моем приложении 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
  }
}

Ответы [ 3 ]

1 голос
/ 25 октября 2019

Сделайте это контролируемым входом и устанавливайте значение только при соблюдении условия. 

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>
0 голосов
/ 25 октября 2019

Если я правильно вас понимаю, если определенное условие не выполняется, вы хотите, чтобы ввод не отражал текст, который только что ввел пользователь.

Для этого вам понадобитсяконтролировать значение вашего входа через состояние.

Это означает, что вы делаете что-то вроде этого: 

<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})
}
0 голосов
/ 25 октября 2019 
handleChange = e => {
  if(e.target.value > 100){
    alert("High");
    e.target.value = "";
  }
  else {
    // your normal processing
  }
}

должно работать.

Объяснение: Ваш код просто не будет выполнен, если условие if выполнено. Строка e.target.value = "" на самом деле не «не показывает» ввод пользователя (как это было запрошено в комментарии), а переопределяет ее пустой строкой.

Упоминание: В этом решении ничего нетделать с React, а работает в любом контексте.

...