Как включить и отключить тег p в реакции на определенные условия

Question

Как включить и отключить тег p в реакции на определенные условия. При нажатии кнопки я вызвал функцию проверки, в этом есть сравнение, если его успех, тогда только тег p должен быть виден после того, как тег p становится видимым, тогда кнопка проверки должна быть отключена.

Я пробовал эту логику c, но она терпит неудачу

Должны ли мы использовать eval?

export default function practice() {

    const [validation, setValidation] = useState("");
    const [result, setResult] = useState(0);
    const [inputValue, setInput] = useState("");

    const [sucessfull, setSucessfull] = useState({ "text": "You have Successfully Subscribed", "disabled": "true" })
    const [failed, setFailed] = useState({ "text": "Wrong Captcha", "disabled": "true" })

    const Generators = () => {
        const data1 = Math.round(10 * Math.random());
        const data2 = Math.round(10 * Math.random());
        const alpha = ['+', '-', '*'];
        const a = alpha[Math.floor(Math.random() * alpha.length)];
        const str = ` ${data1} ${a} ${data2} `
        const res = eval(`${data1} ${a} ${data2}`)
        setValidation(str);
        setResult(res)
    }

    const handleInput = (e) => {
        setInput(e.target.value)
        console.log(inputValue)
    }

    const validate = () => {
        const x = result.toString();
        const y = inputValue.toString();
        setInput("");
        if (x === y) {
                alert("success")
                setSucessfull(sucessfull.disabled = true)
            }
        else {
            alert("fail");
            setFailed(sucessfull.disabled = true)
            Generators();
        }
    }


    return (
        <div>
            <h3 >{validation}</h3>
            <input id="input-Number" type="text" onChange={e => handleInput(e)} value={inputValue}></input>
            <button onClick={Generators}>Refersh Captcha</button>
            <button onClick={validate} >Validate</button>
            <div>
                <p disabled = {sucessfull.disabled}>{sucessfull.text}</p>
                <p disabled ={failed.disabled}>{failed.text}</p>
            </div>
        </div>
    )
}

Answer 1

Способ проверки успешности может быть не лучшим. Это может быть лучше, попробуйте. Удалите сбойное состояние, так как вам нужно только одно состояние для управления этим, оставьте успешное и инициализируйте его нулевым. Тогда я не совсем понимаю, что такое отключенный p (я думаю, вы имеете в виду текст, который хотите показать). Затем показать текст или другой, основанный на успешном состоянии:

export default function practice() {

  const [validation, setValidation] = useState("");
  const [result, setResult] = useState(0);
  const [inputValue, setInput] = useState("");

  const [sucessfull, setSucessfull] = useState(null);

  const Generators = () => {
      const data1 = Math.round(10 * Math.random());
      const data2 = Math.round(10 * Math.random());
      const alpha = ['+', '-', '*'];
      const a = alpha[Math.floor(Math.random() * alpha.length)];
      const str = ` ${data1} ${a} ${data2} `
      const res = eval(`${data1} ${a} ${data2}`)
      setValidation(str);
      setResult(res)
  }

  const handleInput = (e) => {
      setInput(e.target.value)
      console.log(inputValue)
  }

  const validate = () => {
      const x = result.toString();
      const y = inputValue.toString();
      setInput("");

      alert(x === y ? "success" : "fail")
      setSucessfull(x === y)
  }


  return (
      <div>
          <h3 >{validation}</h3>
          <input id="input-Number" type="text" onChange={e => handleInput(e)} value={inputValue}></input>
          <button onClick={Generators}>Refersh Captcha</button>
          <button disabled={sucessfull} onClick={validate} >Validate</button>
          <div>
              { succesfull !== null &&
                  <p>{sucessfull ? 'You have Successfully Subscribed' : 'Wrong Captcha'}</p>
               }
          </div>
      </div>
  )
}

Answer 2

Примечание: тег p не имеет атрибута disabled , он зарезервирован для элементов управления формой .

---

Вы пытаетесь сделать следующее:

• Отображать тег p только после запуска validate.
• Отображать текст успеха или ошибки.

Ваши две переменные sucessfull и failed могут быть объединены в одну переменную состояния:

const [valid, setValid] = useState(null)

Обновление valid с setValid до true или false в пределах validate и будут работать следующие логи рендеринга c:

{valid !== null && <p>{valid ? 'You have Successfully Subscribed' : 'Wrong Captcha'}</p>}