1

我有一个包含饼图的反应页面。它返回这个 div 以及其他几个 HTML 组件。

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

感谢您阅读本文。

4

1 回答 1

1

你不应该在 React 之外更新 React 组件的 HTML。这意味着您应该将状态挂钩用于过程或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}>
    </>
);
于 2020-12-01T14:19:31.107 回答