Кнопка активна лишь после заполнения всех полей

Условие

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

function App() {
  const [formState, setFormState] = React.useState();

  return (
    <>
      <h1>Disable button</h1>
      <input type="text" />
      <input type="text" />
      <input type="checkbox" />
      <button>submit</button>
    </>
  );
}

Ответ

Сделайте поля управляемыми, храните две строки и boolean checkbox. Кнопка disabled, пока хотя бы одна строка после trim пуста или checkbox не отмечен.

function App() {
  const [form, setForm] = React.useState({ first: '', second: '', agreed: false });
  const update = (key, value) => setForm(previous => ({ ...previous, [key]: value }));
  const ready = Boolean(form.first.trim() && form.second.trim() && form.agreed);
  return <>
    <label>Первое поле <input value={form.first} onChange={e => update('first', e.target.value)} /></label>
    <label>Второе поле <input value={form.second} onChange={e => update('second', e.target.value)} /></label>
    <label><input type="checkbox" checked={form.agreed}
      onChange={e => update('agreed', e.target.checked)} />Подтверждаю</label>
    <button type="button" disabled={!ready}>submit</button>
  </>;
}

Обработчик фактической отправки добавляется отдельно и должен повторно проверить данные. disabled — состояние интерфейса, не замена backend-валидации.