reactjs - 用户输入以使用表单中的 reactjs 创建饼图
问题描述
如何从reactjs中的表单中获取用户输入的图表
我制作了一个表格和饼图,但不知道如何从表格中访问数据
chartData:{
datasets:[{
data:[10,20,30,40,50]
}]
}
我希望图表由表单的输入创建
解决方案
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: [...dataPie.datasets[0].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="number"
value={this.state.first}
name="first"
onChange={(evt) => this.handleChange(evt)} />
<input type="number"
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>
)
}
}
推荐阅读
- ios - How to do a sharedViewModel in iOS like we have in Android?
- javascript - 如何在我的 useEffect 方法中正确使用异步?
- java - Springboot ResultSetExtractor vs RowCallbackHandler 跳过第一行
- python - 使用 youtube-dl 时出现“启动器中的致命错误”
- reactjs - 为什么我用ajax发送post方法时,data参数为null?
- python - 如何制作一个充满字典的新列
- java - java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法“java.lang.CharSequence android.widget.TextView.getText()”
- python - Python程序一直运行不输出
- python - 简单的二叉树 DFS 递归代码提前停止而不是走完整的树
- oracle - 在 Oracle 中创建表空间时是否需要数据文件?