在输入数据时更新 React 中的饼图

Question

我有一个包含饼图的 React 页面。它 returns 这个 div 以及其他几个 HTML 组件。

我还有 25 个输入字段更新 3 个变量（incomeNum、expenseNum 和 savingNum），因为在任何输入字段中输入了某些内容（反应中的 onChange 事件）。

newData 函数如下所示。它成功更新了 3 个变量，没有问题：

饼图应该显示来自 incomeNum、expenseNum 和 savingNum 变量的数据。我的目标是在填写输入字段时像我一样动态更新饼图到 incomeNum、expenseNum 和 savingNum 变量。我的想法是，当我更新这三个变量时，我可以只更新数据源（由饼图使用）并且它会更新饼图，但问题是图表不会自行更新，除非您单击它。我想让它在不点击的情况下更新。

感谢阅读本文。

Answer 1

您不应在 React 之外更新 HTML React 组件。这意味着您应该使用 state hooks for procedural or setState 面向对象。

因此，例如：

render() {
    return (<>
       <div id="income">
              ${this.state.incomeNum}
       </div>
       <input value={this.state.incomeNum} onChange={(evt) => this.setState({incomeNum: evt.target.value})} />
    </>)

或者，在程序中：

const [incomeNum, setIncomeNum] = useState(0);

return (
    <>
        <p>${incomeNum}</p>
        <input onChange={(evt) => setIncomeNum(evt.target.value)} value={incomeNum}>
    </>
);

在输入数据时更新 React 中的饼图

Updating a Pie Chart in React as Data is Entered

javascript

reactjs

chart.js

react-chartjs-2