Блог

У меня есть набор входных данных, которые необходимо заполнить полностью. Я должен отключить кнопку отправки, когда она не завершена. Он работал нормально, пока я не решил стереть и заполнить его снова. Он никогда не отключается. Каков был бы правильный и правильный способ сделать это? Есть ли лучший способ сделать это?

кликните сюда

    <div className="App">
      <InputCode
        length={6}
        label="Code Label"
        loading={loading}
        onComplete={(code) => {
          setCodes(code);
          setLoading(true);
          setTimeout(() => setLoading(false), 10000);
        }}
      />
      <br />
      <button disabled={codes?.length < 6 || !codes}>Submit</button>
    </div>
 

Чтобы сделать это, вы вместо этого получите отключенное состояние от своего ребенка:

• Добавление нового состояния в родительский компонент:

 const [disabled, setDisabled] = useState(true);
 

• Передайте его своему дочернему компоненту:

 <InputCode
        length={6}
        label="Code Label"
        loading={loading}
        onComplete={(code) => {
          setLoading(true);
          setTimeout(() => setLoading(false), 10000);
        }}
        setDisabled={setDisabled}
/>
 

• Установите статус вашей базы кнопок в соответствии с этим состоянием:

 <button disabled={disabled}>Submit</button>
 

• Импортируйте setDisabled из вашего дочернего компонента и добавьте эффект использования следующим образом:

   useEffect(() => {
    if (code.some((num) => num === "")) {
      setDisabled(true);
    } else {
      setDisabled(false);
    }
  }, [code, setDisabled]);
 

Рабочий Пример

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

inputCode.js

 import React, { useState, useRef, useEffect } from "react"; //add useEffect to watch code values
const InputCode = ({ length, label, loading, onComplete, onInComplete }) //onIncomplete
 

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

 useEffect(() => {
  const values = code.filter((item) => {
    return item !== "";
   });
   if (values.length !== length) {
     onInComplete(true);
   }
}, [code]);
 

в index.js

 <InputCode
  length={6}
  label="Code Label"
  loading={loading}
  onComplete={(code) => {
    setCodes(code);
    setLoading(true);
    setTimeout(() => setLoading(false), 1000);
  }}
  onInComplete={() => setCodes(false)} //add this props to check validation
  />
 

и вы можете просто отключить кнопку в зависимости от состояния кода

 <button disabled={!codes}>Submit</button>