禁用按钮在反应中无法正常工作答案

【问题标题】：disabled button not working properly in react禁用按钮在反应中无法正常工作
【发布时间】：2021-12-17 10:55:55
【问题描述】：

如果提供超过 10 个字符，那么按钮应该被禁用，但是当我们提供

import React, { useState } from "react";
export default function DropDown() {
  let [disable,setDisable]=useState(false)
  function check(){
    let inp=document.querySelector('input');
    let btn=document.querySelector('button');
    if(inp.value.length>10){
      btn.disable=true
      setDisable(true)
    }else{
      btn.disable=false;
      setDisable(false)
    }
  }
   return (
    <>
    <input disabled={setDisable} onKeyUp={check}/>
<button>click</button>
    </>
  );
}

【问题讨论】：

{<input disabled={disable} onKeyUp={check}/>
setDisable 用于设置状态。 disable 是状态（真或假）。您需要对“disabled=”使用禁用而不是 setDisable
是的，但如果我想输入超过 10 位数字的输入将被禁用，但我想禁用按钮
您不应该直接使用查询选择器从 DOM 获取用户输入，而应该从在虚拟 DOM 中呈现的输入状态中获取值。
如果你想禁用按钮，然后在按钮上添加 disabled 属性，而不是在下面的答案中提到的输入上

标签： javascript reactjs

【解决方案1】：

只需将 <input disabled={setDisable} onKeyUp={check}/> 更改为<input disabled={disable} onKeyUp={check}/>

import React, { useState } from 'react';
export default function App() {
    const [disable, setDisable] = useState(false);
    const check = ({target}) => {
    if (target.value.length > 10) {
      setDisable(true);
    }
    else {
      setDisable(false);
    }
    }
    return (
        <>
            <input disabled={disable} onKeyUp={(e) => check(e)} />
            <button>click</button>
        </>
    );
}

如果你想禁用按钮，只需添加

<button disabled={disable}>click</button>

【讨论】：

是的，现在它工作得很好