[英]React: TypeError: Cannot read property 'innerHTML' of null
I am learning React and creating a simple calculator.我正在学习 React 并创建一个简单的计算器。 All HTML is created within React.
所有 HTML 都是在 React 中创建的。 I am getting a TypeError: Cannot read property 'innerHTML' of null.
我收到 TypeError:无法读取 null 的属性“innerHTML”。 The HTML is rendered before the other functions so I am unsure why I am getting the error message.
HTML 在其他函数之前呈现,所以我不确定为什么会收到错误消息。 The HTML:
HTML:
function App() {
return (
<div className="App">
<label>Number 1: </label>
<input type="text" id="x"></input>
<br></br>
<label>Number 2: </label>
<input type="text" id="y"></input>
<br></br>
<button onClick={add()}>Add</button>
<button onClick={subtract()}>Subtract</button>
<br></br>
<output id="out"></output>
</div>
);
}
Here is where I am getting the error (at the.innerHTML):这是我得到错误的地方(在.innerHTML):
function add() {
var x = document.getElementById('x').innerHTML
var y = document.getElementById('y').innerHTML
var z = x + y
document.getElementById("out").innerHTML = z
}
You need to check tutorials on react, this is very basic start to learn code and not full proof but it will explain you how react works.您需要查看有关 react 的教程,这是学习代码的非常基本的开始,而不是完整的证明,但它将向您解释 react 的工作原理。
For react, you don't need to get DOM values, it is react which manages the dom.对于 react,您不需要获取 DOM 值,它是管理 dom 的 react。
Codepen: https://codepen.io/ktdev/pen/rNWwNVJ代码笔: https://codepen.io/ktdev/pen/rNWwNVJ
const App = () => {
const [number1, setNumber1] = React.useState(0);
const [number2, setNumber2] = React.useState(0);
const handleChange = (e) => {
setNumber1(e.target.value);
};
return (
<div className="box">
<label>Number 1: </label>
<input
type="text"
id="x"
onChange={(e) => setNumber1(Number(e.target.value))}
></input>
<br />
<label>Number 2: </label>
<input
type="text"
id="y"
onChange={(e) => setNumber2(Number(e.target.value))}
></input>
<br />
{number1} + {number2} = {number1 + number2}
<br />
{number1} - {number2} = {number1 + number2}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.