首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >查询选择器无当我请求一个输入值时

查询选择器无当我请求一个输入值时
EN

Stack Overflow用户
提问于 2021-07-04 11:38:17
回答 2查看 692关注 0票数 0
代码语言:javascript
运行
复制
  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是一个正常的HTTML输入字段,应该启动一个get请求,而fetchData()是一个正常的fetch API函数,并且工作正常。这样就给了我一个错误:

TypeError: document.querySelector(.)为null App.js/App.js:5-5让searchQuery=document.querySelector('#searchQ').value

当我删除.value时,它正常运行,但是当然,它不会获取用户的输入。我试过让而不是康斯特。另外,我在一个普通的js、HTML页面中获得了代码,并成功地记录了日志,但同样的方法在react中不起作用。有什么帮助吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-07-04 12:37:45

除了某些特殊情况外,使用querySelector()getElementById()被认为是最高级别的错误实践,但是在本例中,您可以使用useEffect,因为您需要等待以使组件挂载。

代码语言:javascript
运行
复制
  useEffect(() => {
    const searchQuery = document.querySelector("#searchQ").value;
    console.log(searchQuery);
  }, []);

更好的版本将是

代码语言:javascript
运行
复制
  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>
    </>
  );
票数 1
EN

Stack Overflow用户

发布于 2021-07-04 12:12:52

在react中,您不像普通HTML那样直接加载组件。它使用render()方法,而那里的querySelector方法不起作用。

或者使用state直接控制/检索值,或者使用ref,如@boxdob所说。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68244342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档