reactjs - React 状态下的数学运算

Question

我想显示 % 值的输入。当我记录它时，它显示正确但无法在页面中显示。想要在输入部分下方显示 % 值的输入

const [rcommission, setRcommission] = useState({
    aeps: "",
    matm: "",
});

let name,value;
const getRetailData = (event) => {
    name= event.target.name;
    value= event.target.value;
    setRcommission({ ...rcommission, [name]:value });
    let aeps = Number(value);
    aeps *= 0.03;
    let matm = Number(value);
    matm *= 0.04;
    if (name === 'aeps') {
        console.log(aeps);
    } else if (name === 'matm') {
        console.log(matm);
    }
};

这是输入秒

<input name="aeps"
            type="number"
            value={rcommission.aeps}
            onChange={getRetailData}
            id="ContentPlaceHolder1_txtname"
            className="form-control"
            autoComplete="off"
            placeholder=" AEPS" />

            <div className="help-block with-errors"></div>
        </div>
        <span> {rcommission.aeps} </span>

Answer 1

我不知道这是否是您需要的，但我可以尝试帮助您。检查我的代码：

const [rcommission, setRcommission] = useState({
      aeps: 0,
      matm: 0
});

const getRetailData = (event) => {
     const name = event.target.name;
     const value = event.target.value;
     setRcommission({
        ...rcommission,
        [name]: name === "aeps" ? value * 0.03 : value * 0.04,
     });
};

这是我的渲染：

<div className="">
  <input
    name="aeps"
    type="number"
    onChange={getRetailData}
    id="ContentPlaceHolder1_txtname"
    className="form-control"
    autoComplete="off"
    placeholder=" AEPS"
  />
  <br />
  <br />
  <input
    name="matm"
    type="number"
    onChange={getRetailData}
    id="ContentPlaceHolder1_txtname"
    className="form-control"
    autoComplete="off"
    placeholder=" MATM"
  />

  <h5>AEPS: {rcommission.aeps} </h5>
  <h5>MATM: {rcommission.matm} </h5>
</div>