我的React代码中有一个错误，正在制作一个计算器

Question

//我有一条错误消息"无法读取null的属性"value"；，也许有一些可以帮助你？

import React from 'react'
function Calculator() {
function Calculation() {
const theValueOne = parseInt(document.querySelector("#valueOne").value);
const theValueTwo = parseInt(document.querySelector("#valueTwo").value);
const theOperator = document.querySelector("#operators").value;
let theCalculation;
if (theOperator === "addition") {
theCalculation = theValueOne + theValueTwo;
} else if (theOperator === "minus") {
theCalculation = theValueOne - theValueTwo;
} else if (theOperator === "multiply") {
theCalculation = theValueOne * theValueTwo;
} else if (theOperator === "divide") {
theCalculation = theValueOne / theValueTwo;
}
document.querySelector("#resualt");
}
return (
<div>
<form>
Value 1: <input type="text" id="valueOne" />
Value 2: <input type="text" id="valueTwo" />
Operator:
<select id="operators">
<option value="addition"></option>
<option value="minus"></option>
<option value="multiply"></option>
<option value="divide"></option>
</select>
<button type="button" onClick={Calculation()}>Calculate</button>
</form>
<div id="resualt"></div>
</div>
)
}
export default Calculator

Answer 1

您可以使用React Hooks来获取功能组件中各处的输入和运算符的值

import React, { useState } from "react";
function Calculator() {
const [valueOne, setValueOne] = useState();
const [valueTwo, setValueTwo] = useState();
const [operator, setOperator] = useState();
const [result, setResult] = useState();
function Calculation() {
// Here you can access valueOne, valueTwo, operator directly
let theCalculation;
...
setResult(theCalculation);

然后，您可以通过在输入标签中添加value和onChange道具来直接获得输入的值

<form>
Value 1: <input type="number" id="valueOne" value={valueOne} onChange={(e) => setValueOne(e.target.value) />
Value 2: <input type="number" id="valueTwo" value={valueTwo} onChange={(e) => setValueTwo(e.target.value) />
Operator:
<select id="operators" value={operator} onChange={(e) => setOperator(e.target.value)}>
<option value="addition"></option>
<option value="minus"></option>
<option value="multiply"></option>
<option value="divide"></option>
</select>
<button type="button" onClick={calculation}>Calculate</button>
<div id="resualt">{result}</div>
</form>