一般来说，我是React的新手，尤其是钩子。我正在尝试在输入表单上做一个非常简单的代数表达式。理想情况下，我会让它在没有计算按钮的情况下自动更新。当我这样做的时候，我得到了一些奇怪的结果，这些结果在数学上毫无意义。请原谅我无法进一步解释这一点，我是一个愚蠢的完全损失！
如能提供帮助，我们将不胜感激！
import React, { useState } from "react";
import PropTypes from "prop-types";
import "./App.css";
import MaskedInput from "react-text-mask";
import NumberFormat from "react-number-format";
import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
import Button from "@material-ui/core/Button";
// import { evaluate } from "mathjs";
// import Input from "./components/inputs/input-field.component";
function TextMaskCustom(props) {
const { inputRef, ...other } = props;
return (
<MaskedInput
{...other}
ref={(ref) => {
inputRef(ref ? ref.inputElement : null);
}}
mask={[
"(",
/[1-9]/,
/d/,
/d/,
")",
" ",
/d/,
/d/,
/d/,
"-",
/d/,
/d/,
/d/,
/d/,
]}
placeholderChar={"u2000"}
showMask
/>
);
}
TextMaskCustom.propTypes = {
inputRef: PropTypes.func.isRequired,
};
function NumberFormatCustom(props) {
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
{...other}
getInputRef={inputRef}
onValueChange={(state) => {
onChange({
target: {
name: props.name,
value: state.value,
},
});
}}
thousandSeparator
isNumericString
/>
);
}
NumberFormatCustom.propTypes = {
inputRef: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
};
function FormattedInputs() {
const [state, setState] = useState({
numberformatOH: "150",
numberformatThird: "30",
numberformatAvgGross: "38",
numberformatMin: "20",
numberformatGoal: "200",
numberformatMnth: "", // add this values to the state
numberformatYrly: "",
});
const handleChange = (event) => {
setState({
...state,
[event.target.name]: event.target.state,
});
return state;
};
// const x = Number(state.numberformatAvgGross);
// const y = Number(state.numberformatGoal);
// const z = Number(state.numberformatAvgGross);
const onButtonClick = () => {
const numberformatMnth = (
Number(state.numberformatAvgGross) *
Number(state.numberformatGoal) -
Number(state.numberformatAvgGross)) /
4;
const numberformatYrly = 12 * (
Number(state.numberformatAvgGross) *
Number(state.numberformatGoal)) -
12 * Number(state.numberformatAvgGross);
setState({
...state,
numberformatMnth,
numberformatYrly, // update this values when button clicked
});
console.log(numberformatYrly);
console.log(numberformatMnth);
return state;
};
return (
<div className="App">
<header className="App-header">
<h1>OrderHound Savings Calculator</h1>
<body>
<div>
<form>
<div className="input">
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AttachMoneyIcon />
</InputAdornment>
),
inputComponent: NumberFormatCustom,
}}
label="OrderHound Cost"
id="outlined-size-numberformatOH"
variant="outlined"
value={state.numberformatOH}
onChange={handleChange}
name="numberformatOH"
/>
</div>
<div className="input">
<TextField
InputProps={{
inputComponent: NumberFormatCustom,
}}
label="3rd Party Percentage Cost"
id="outlined-size-numberformatThird"
variant="outlined"
value={state.numberformatThird}
onChange={handleChange}
name="numberformatThird"
/>
</div>
<div className="input">
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AttachMoneyIcon />
</InputAdornment>
),
inputComponent: NumberFormatCustom,
}}
label="Average Sales Gross"
id="outlined-size-numberformatAvgGross"
variant="outlined"
value={state.numberformatAvgGross}
onChange={handleChange}
name="numberformatAvgGross"
/>
</div>
<div className="online-orders">
<TextField
InputProps={{
inputComponent: NumberFormatCustom,
}}
label="Minimum Number of Orders"
id="outlined-size-numberformatMin"
variant="outlined"
value={state.numberformatMin}
onChange={handleChange}
name="numberformatMin"
/>
<TextField
InputProps={{
inputComponent: NumberFormatCustom,
}}
label="Goal Number of Orders"
id="outlined-size-numberformatGoal"
variant="outlined"
value={state.numberformatGoal}
onChange={handleChange}
name="numberformatGoal"
/>
</div>
<div className="savings">
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AttachMoneyIcon />
</InputAdornment>
),
readOnly: true,
}}
label="Monthly Savings"
id="outlined-size-read-only-numberformatMnth"
variant="outlined"
value={state.numberformatMnth}
// onButtonClick={savingsMnth}
name="numberformatMnth"
/>
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AttachMoneyIcon />
</InputAdornment>
),
readOnly: true,
}}
label="Yearly Savings"
id="outlined-size-read-only-numberformatYrly"
variant="outlined"
value={state.numberformatYrly}
// onButtonClick={savingsYrly}
name="numberformatYrly"
/>
</div>
<Button
className="button"
variant="contained"
color="primary"
size="large"
onClick={onButtonClick}
>
Calculate
</Button>
</form>
</div>
</body>
</header>
</div>
);
}
export default FormattedInputs;您应该保持计算值的状态，并在单击按钮时调用handleChange来更改它们。它应该是这样的：
const [state, setState] = useState({
numberformatOH: "150",
numberformatThird: "30",
numberformatAvgGross: "38",
numberformatMin: "20",
numberformatGoal: "200",
numberformatMnth: "0", // add this values to the state
numberformatYrly: "0",
});
const x = Number(state.numberformatAvgGross);
const y = Number(state.numberformatGoal);
const z = Number(state.numberformatAvgGross);
const handleChange = (event) => {
setState({
...state,
[event.target.name]: event.target.state,
});
return state;
};
const onButtonClick = (x, y, z) => {
const numberformatMnth = (x * y - z) / 4;
const numberformatYrly = 12 * (x * y) - 12 * z;
setState({
...state,
numberformatMnth,
numberformatYrly, // update this values when button clicked
});
};
您可以使用useEffect和您的输入值作为依赖项，形式如下：
const [calculatedResult, setCalculatedResult] = useState(0);
useEffect(() => {
setCalculatedResult(a+b);
}, [a, b]);