queryselector none 当我在反应中请求输入值时

Question

  const searchQuery=document.querySelector('#searchQ').value
  const p=document.querySelector('p')
  const log= (e)=>{
    e.preventDefault()
    console.log(searchQuery)
    p.innerHTML=`${searchQuery}`
    fetchData()
  }

这是我在 React 应用程序中给我错误的部分代码，尤其是第一行。 #searchQ 是一个正常的 HTML 输入字段，应该启动一个获取请求，fetchData() 是一个正常的提取 API 函数，它工作正常。这样它给了我这个错误：

TypeError: document.querySelector(...) is null App src/App.js:5 5 | let searchQuery=document.querySelector('#searchQ').value

当我删除 .value 时，它会正常运行，但当然不会获取用户的输入。我试着用 let 而不是 const。我还把代码放在 vanilla js HTML 页面中，它成功登录，但同样的方法在反应中不起作用。有帮助吗？

Answer 1

在 React 中，您不会像往常一样直接加载组件 HTML。它使用 render() 方法并且 querySelector 方法不起作用。

要么使用 state 直接 control/retrieve 值，要么像 @boxdob 所说的那样使用 ref。

Answer 2

除了某些特定情况外，使用 querySelector() 或 getElementById() 被认为是最糟糕的做法，但是在这种情况下，您可以像使用 useEffect 一样工作需要等待组件安装。

  useEffect(() => {
    const searchQuery = document.querySelector("#searchQ").value;
    console.log(searchQuery);
  }, []);

更好的版本是

  const [value, setValue] = useState("");
  const pRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();

    pRef.current.innerHTML = value;

    console.log(value);
  };

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="text" value={value} id="searchQ" onChange={handleChange} />
      </form>
      <p ref={pRef}></p>
    </>
  );

queryselector none 当我在反应中请求输入值时

queryselector none when I ask for an input value in react

javascript

reactjs

fetch-api