reactjs - 在 reactjs 的输入字段中输入用户输入时动态创建和更新饼图
问题描述
import React, { Component } from "react";
import { Pie } from "react-chartjs-2";
export default class App extends Component {
state = {
dataPie: {
datasets: [{
data: [10, 20, 30]
}],
},
first: "",
second: "",
}
handleSubmit = () => {
const { dataPie } = this.state;
this.setState({
dataPie: {
...dataPie,
datasets: [{
...dataPie.datasets,
data: [
this.state.first,
this.state.second
]
}]
}
})
}
handleChange = (evt) => {
let a = parseInt(evt.target.value)
this.setState({
[evt.target.name]: a,
})
}
render() {
const { data, dataPie } = this.state;
console.log(dataPie);
return (
<React.Fragment>
<input type="string"
value={this.state.first}
name="first"
onChange={(evt) => this.handleChange(evt)} />
<input type="string"
value={this.state.second}
name="second" onChange={(evt) => this.handleChange(evt)} />
<button onClick={() => this.handleSubmit()}>add data to chart</button>
<h1>pie chart</h1>
<Pie data={dataPie} />
</React.Fragment>
)
}
}
请帮助我。我正在尝试以图表或饼图的形式显示用户在输入字段中输入的数据,下面是我尝试过的 StackOverflow 的代码片段,但单击按钮。我收到错误。请帮我解决这个问题
解决方案
推荐阅读
- ruby - Ruby中行首的问号
- julia - 无法从函数返回值:错误:LoadError:ArgumentError:不应该打印`nothing`;使用 `show`、`repr` 或
- c++ - 我无法在 STM32F407VG-Discovery 中读取鼠标数据
- macos - 文件中的shell脚本相对位置
- elasticsearch - 如何在 grok regex fluentd 中定义一个字段
- javascript - 过滤带有标题的列表并保留过滤项目的标题
- arrays - 如何在 Flutter 上显示 Widget 的数组元素
- embedded - 如何避免在 UART 通信期间损坏控制器
- install4j - 使用 Zulu 有哪些选择?
- ios - 如何从 URL 中获取查询参数?