React Hooks数学
React Hooks数学
提问于 2020-11-22 05:36:32
我对一般的反应是全新的，尤其是钩子。我正在尝试在输入表单上做一个非常简单的代数表达式。理想情况下，我会让它在没有计算按钮的情况下自动更新。当我这样做的时候，我得到了一些奇怪的结果，这些结果在数学上没有意义。请原谅我不能进一步解释这一点，我是一个愚蠢的彻底的失败者！
如果能帮上忙，我们将不胜感激！
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;
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-11-22 05:48:38
您应该将计算值保持在该状态，并在单击按钮时调用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
});
};Stack Overflow用户
发布于 2020-11-22 05:44:21
您可以使用useEffect，并将输入值作为以下形式的依赖项：
const [calculatedResult, setCalculatedResult] = useState(0);
useEffect(() => {
setCalculatedResult(a+b);
}, [a, b]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64948345
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号