Блог

Главная - Вопросы по программированию - Фиксируйте любые изменения в форме — Реагируйте

Фиксируйте любые изменения в форме — Реагируйте

#reactjs

Вопрос:

У меня есть форма по крайней мере с 30 входами. Я хочу показывать сообщение Do you want to save the changes ? только в том случае, если пользователь внес какие-либо изменения, иначе не показывайте это сообщение. Решение, которое я могу придумать, это,

  1. Добавьте onChange событие в каждое поле ввода .
  2. создайте логическую state переменную типа isChanged и инициализируйте с false помощью .
  3. При любом onChange триггере события вызовите метод , подобный handleChange handleChange методу .inside , установите значение isChanged переменной True равным .
  4. Если True затем показать сообщение, то больше не показывайте.

Мой вопрос в том, есть ли способ, которым мы можем захватить обмен с уровня формы вместо захвата onChange из отдельных полей ?

Ответ №1:

Мой вопрос в том, есть ли способ, которым мы можем захватить обмен с уровня формы вместо захвата onChange из отдельных полей?

Да, вы можете использовать обработчик form onChange событий элемента.

Вы можете добавить дополнительный фрагмент состояния, чтобы отслеживать, загрязнена форма или нет, и в некоторых обратных вызовах, где вы хотите отобразить сообщение/предупреждение, проверьте dirty состояние и условно отобразите сообщение.

 const [dirty, setDirty] = React.useState(false);

const markFormDirty = () => setDirty(true);

...

/* in some callback */
if (dirty) {
  ... logic to trigger message ... 
}

...

<form onChange={markFormDirty}>
  ...
</form>
 
 function App() {
  const [formKey, setFormKey] = React.useState(0);
  const [dirty, setDirty] = React.useState(false);

  const markFormDirty = () => setDirty(true);

  const resetState = () => {
    setFormKey((key) => key   1);
    setDirty(false);
  };

  const submitHandler = (e) => {
    e.preventDefault();
    resetState();
  };

  const resetHandler = (e) => {
    e.preventDefault();
    if (dirty) {
      if (window.confirm("Do you want to save the changes?")) {
        window.alert("Saved!");
        resetState();
      }
    }
  };

  return (
    <div className="App">
      <h1>
        Form key: {formKey} - isDirty?: {dirty ? "yes" : "no"}
      </h1>
      <form
        key={formKey}
        onChange={markFormDirty}
        onSubmit={submitHandler}
        onReset={resetHandler}
      >
        {Array.from({ length: 10 }, (_, i) => i).map((i) => (
          <div key={i}>
            <label>
              Text {i   1}
              <input id={`test-${i}`} type="text" />
            </label>
          </div>
        ))}

        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />
Метки: