Можно ли вызвать событие onChange с setState?

Question

Реагирует ли событие onChange, только когда пользователь вводит данные в поле ввода?

Я хочу установить грязный флаг на форме, чтобы при переходе пользователя со страницы он вызывал диалоговое окно с вопросом, действительно ли онхочу отменить изменения. Флаг isDirty находится в состоянии моего компонента и устанавливается, когда пользователь вводит данные в поля ввода. Я боялся, что когда я инициализирую состояние в конструкторе с предопределенными входными значениями, это может случайно вызвать onChange, что приведет к изменению состояния и приведет к установке isDirty на true, когда пользователь даже не вводит в поле.

Прямо сейчас этоработает. Это ожидаемое поведение и безопасен ли я на 100%?

Пример кода: есть ли вероятность того, что handleChange будет вызван инициализацией состояния в конструкторе или установкой состояния в обработчике кнопки onClick?

class ExampleComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { exampleInput: "exampleValue" };
    }

    handleChange = (event) => {
      this.setState({
         exampleInput: event.target.value,
      });
    }

    onExampleButtonClick = () => {
      this.setState({
         exampleInput: "buttonClicked",
      })
    }

    render() {
      return (
        <div>
          <input name="exampleInput" value={this.state.exampleInput} onChange={this.handleChange}/>
          <button onClick={this.onExampleButtonClick}>Example Button</button>
        </div>
      );
    }
}

Answer 1

Да, вы можете использовать componentDidUpdate и проверять состояние внутри, если условие действительно, вы можете сделать что-то вроде этого

var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);

, где input будет ссылкой на элемент, для которого вы хотите инициировать событие при болеепо ссылкам здесь: https://reactjs.org/docs/refs-and-the-dom.html