如何在useState Reactjs中保存计算字段答案

【问题标题】：how to save calculated field in a useState Reactjs如何在useState Reactjs中保存计算字段
【发布时间】：2020-11-24 21:16:52
【问题描述】：

我在如何使我的 useState 的总字段保存或加载价格 * 数量的计算时遇到问题，我已经在我的 useState 中保存了价格和数量，但我无法保存总计。

这是我的代码。

从 'react' 导入 React, { Fragment,useState };

const DetailPurchase =(props) => { const [详细信息，setDetail] = useState({ 价格：0.00，数量：0，总计：0.00， });

const updateState = e => {
    setDetail({
        ...detail,
        [e.target.name] : e.target.value
    })
}

return(
    <Fragment>
                <div class="row justify-content-center">
                    <div class="col-12">
                        <form onSubmit={addDetail}
                        >
                           <div class="form-group">
                                <label>Price</label>
                                <input class="form-control"
                                        type="text"
                                        name="price"
                                        onChange={updateState}/>
                            </div>

                            <div class="form-group">
                                <label>Quantity</label>
                                <input class="form-control"
                                        type="text"
                                        name="quantity"
                                        onChange={updateState}/>
                            </div>

                            <div class="form-group">
                                <input class="btn btn-success btn-block " 
                                        type="submit"
                                        value="Add"

                                />
                            </div>
                        </form>
                    </div>
                </div>
    </Fragment>
)

}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

我建议在这样的状态挂钩之后计算它

const [detail, setDetail] = useState({price: 0, quantity: 0 });
const total = useMemo(() => detail.price * detail.quantity, [detail]);

【讨论】：

非常感谢 Alejandro 的回答，计算很好，但我需要在细节对象 const [detail, setDetail] = useState({price: 0, quantity: 0, total : 0 });
@alexander 你能解释一下为什么你需要这样并且不能让它处于一个单独的状态吗？我认为你在考虑这种方法。

【解决方案2】：

使用formik https://formik.org/ 它在表单和输入字段中更好，您可以更改更改处理程序

【讨论】：