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中不起作用。有什么帮助吗?
发布于 2021-07-04 12:37:45
除了某些特殊情况外,使用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>
</>
);
发布于 2021-07-04 12:12:52
在react中,您不像普通HTML那样直接加载组件。它使用render()方法,而那里的querySelector方法不起作用。
或者使用state直接控制/检索值,或者使用ref,如@boxdob所说。
https://stackoverflow.com/questions/68244342
复制相似问题