[英]how to solve in react Cannot set properties of null (setting 'inner HTML')?
import React, { useState } from "react";
export default function DropDown() {
const fun=()=>{
document.getElementById('id').innerHTML='Hello world'
}
return (
<>
<button onClick={fun()}>click</button>
<p id="id"></p>
</>
);
}
how to resolve the error in react?如何解决反应中的错误? not in JavaScript.
不在 JavaScript 中。 If we are not use inner HTML instead of that what to use in that field?
如果我们不使用内部 HTML 而不是在那个领域使用什么?
Your immediate problem is that you are calling fun
immediately and then assigning its return value ( undefined
) to onClick
.您的直接问题是您立即调用
fun
然后将其返回值( undefined
)分配给onClick
。
To go about this the way you are trying, you need to assign the function itself. go 关于这个你正在尝试的方式,你需要分配 function 本身。
onClick={fun}
However, direct DOM manipulation runs counter to the way React is designed to work .然而,直接的 DOM 操作与 React 设计的工作方式背道而驰。
Your changes are likely to get wiped out if anything triggers a re-render.如果有任何事情触发重新渲染,您的更改可能会被清除。
React is designed to be data driven . React 被设计为数据驱动的。 To change the DOM you should change the data and let React pull it through to the DOM itself.
要更改 DOM,您应该更改数据并让 React 将其拉入 DOM 本身。
You should make use of state to track the data.您应该使用state来跟踪数据。
export default function DropDown() {
const [open, setOpen] = useState(false);
const fun = useCallback(() => setOpen(open => !open), []);
return (
<>
<button onClick={fun}>click</button>
{open && (<p>Hello, world</p>)
</>
);
}
In React, using the State Hook在 React 中,使用 State Hook
https://reactjs.org/docs/hooks-state.html https://reactjs.org/docs/hooks-state.html
Your code should be你的代码应该是
import React, { useState } from "react";
export default function DropDown() {
const [greeting, setGreeting] = useState('Hello world');
const onChange = () => {
setGreeting('New greeting')
}
return (
<>
<button onClick={onChange}>click</button>
<p id="id">{greeting}</p>
</>
);
}
This is because you are calling the fun
function instead of binding it to the click.这是因为您正在调用
fun
的 function 而不是将其绑定到点击。
It should be: <button onClick={fun}>click</button>
它应该是:
<button onClick={fun}>click</button>
See this CodeSandbox请参阅此CodeSandbox
import React, { useState } from "react";
export default function DropDown() {
const [text,setText] useState('');
const fun=()=>{
setText('Hello world')
}
return (
<>
<button onClick={fun}>click</button>
<p id="id">{text}</p>
</>
);
}
Use state.使用 state。 Using innerHTML is not recommended.
不推荐使用innerHTML。 https://reactjs.org/docs/dom-elements.html
https://reactjs.org/docs/dom-elements.html
That is not how you would do something like that in React.这不是你在 React 中做类似事情的方式。 In most cases, if you are working in React and find yourself manipulating the DOM (
document.getElementById('id').innerHTML
) chances are you are doing it in the "wrong" way and you should double-check your work.在大多数情况下,如果您在 React 中工作并发现自己在操作 DOM (
document.getElementById('id').innerHTML
),那么您可能是以“错误”的方式进行操作,您应该仔细检查您的工作。
In this case, you should have something like:在这种情况下,你应该有类似的东西:
import React, { useState } from 'react'
export default function DropDown() {
const [content, setContent] = useState();
const fun = () => {
setContent('Hello World!')
}
return (
<>
<button onClick={fun}>click</button>
<p>{content}</p>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.