javascript - 如何使用 ReactJS 添加基于用户表单输入的条形图

Question

我想根据用户的表单输入添加一个条形图。提交表单后，它应该显示图表。你们有人能帮我吗？

在标签中我想显示名称数据。在图表中，我想显示一个带有 MonthDays 和 Availablefordays 的条形图。

这是我到目前为止的代码：

import React, { useState } from 'react'


const Multipleinput = () => {

const [userInfo, setUserInfo] = useState({
Name: "",
MonthDays: "",
Availablefordays: ""
});

const [records, SetRecords] = useState([]);

const handleInput = (e) => {
const name = e.target.name;
const value = e.target.value;

setUserInfo({ ...userInfo, [name]: value })
}

const handleSubmit = (e) => {
e.preventDefault();

const newRecord = { ...userInfo, id: new Date().getTime().toString() }

SetRecords([...records, newRecord]);

setUserInfo({ Name: "", MonthDays: "", Availablefordays: "" });
}

return (
 <div>
  <form action="" onSubmit={handleSubmit} >
    <label htmlFor="Name">Name</label>
    <input type="text" value={userInfo.Name} onChange={handleInput}> 
 </input>
    <label htmlFor="MonthDays">Month Days</label>
    <input type="text" value={userInfo.MonthDays} onChange= 
 {handleInput}></input>
    <label htmlFor="Availablefordays">Available for days</label>
    <input type="text" value= 
 {userInfo.Availablefordays} onChange={handleInput}></input>
    <button type="submit" >Save User</button>
  </form>

标签： javascripthtmlcssreactjs