Альтернатива Textfield onChange, который ведет себя как HTML onChange?

Question

У меня есть компонент Textfield, вложенный в другие компоненты, и я передаю ему указатель функции как опору. В настоящее время у меня есть функция, которая передает содержимое текстового поля обратно в корневой компонент, который вызывается с помощью onChange. Если посмотреть на API для Textfield, эта функция вызывается при каждом изменении, в отличие от метода onChange для HTML, который вызывается только тогда, когда элемент формы теряет фокус.

Остальная часть фреймворка написана с использованием React, и этот компонент вложен в другой компонент в Grid.

function Description(props) {

  const {updateDescription} = props;

  function changeDescription(event) {
    updateDescription(event.target.value);
  }

  return (
    <>
      <br></br>
      <TextField 
          margin="dense" 
          id="desc-input"
          type="text"
          onChange={changeDescription}
          multiline
          fullWidth
      />
    </>
  );  
}

Есть ли альтернатива этому, которая не вызывает функцию после каждого изменения, а скорее когда Textfield теряет фокус?

Answer 1

Вы можете использовать onBlur событие, которое вызывается, когда поле теряет фокус

<TextField 
          margin="dense" 
          id="desc-input"
          type="text"
          onBlur={changeDescription}
          multiline
          fullWidth
      />