如何在特定条件通过时启用或禁用反应中的p标签。

Posted 2021-03-19

如何在特定条件通过时启用和禁用p标签.在按钮点击时，我调用了一个函数validate，在这个函数中，有一个比较，如果它成功，那么只有p标签应该是可见的，在p标签可见后，验证按钮应该被禁用。

我试过这个逻辑，但是失败了

我们应该使用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>
    )
}

答案

你检查是否成功的方式可能不是最好的。这可能会更好，试试吧。去掉失败的状态，因为你只需要一个状态来管理它，保留成功的状态并将其初始化为null。我不太明白什么是禁用的p（我想你是指你想显示的文本）。然后在succesfull状态下显示一个文本或其他贝司。

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>
  )
}

另一答案

注意： p 标签没有一个 disabled 属性它是留给 表格控制元素.

---

看来你正在尝试做以下工作。

• 只渲染 p 后面的标签 validate 是运行的。
• 渲染成功或失败的文本。

您的两个变量 sucessfull 和 failed 可以组合成一个单一的状态变量。

const [valid, setValid] = useState(null)

更新 valid 与 setValid 到 true 或 false 内 validate 而下面的渲染逻辑就可以了。

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