我是新来的人，我正在努力做到以下几点。
我想创建一个简单的用户名和密码表格，然后从用户名和密码表单添加数据，并将其显示在同一页面的网格中。然后，每当我添加一个用户（用户名和密码）时，更新网格。
所以这是我的表单，我仅获得用户名：
<div >
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Enter username</label>
<input id="username" name="username" type="text" />
<button>Send data!</button>
</form>
</div>
我想知道该怎么做？我是否需要创建一个子文件，然后将其映射并显示在网格中？或者我可以将其保存在状态变量中，然后显示每个更新？还是有另一种解决方案？
编辑：以下是我的代码，
import React from "react";
import {GridComponent, ColumnsDirective, Page , Inject} from '@syncfusion/ej2-react-grids';
import productsApi from './getJson'
import ddata from '../pages/source.json'
export default class products extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
this.state =
{
QrCode : '',
newProducts : []
}
}
// this one is not working at all
componentDidMount(){
productsApi.getAll().then( data => {
this.setState({
newProducts : data
} )
},
)
}
handleSubmit(event) {
event.preventDefault();
this.setState({
QrCode: event.target.elements.username.value}
);
}
render() {
return (
<div >
<div >
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Enter username</label>
<input id="username" name="username" type="text" />
<button>Send data!</button>
</form>
</div>
<div style={{margin: '10%', marginTop : '5%'}}>
<GridComponent dataSource={ddata} allowPaging={true} pageSettings= {{pageSize:100}}>
<Inject services ={[Page]}/>
</GridComponent>
</div>
</div>
);
}
}
这是我的示例json，
[
{
"id":0,
"Qr":1234567891,
"Stat":"A",
"name":"Hello world"
},
{
"id":0,
"Qr":1234567891,
"Stat":"A",
"name":"Hello world"
},
{
"id":0,
"Qr":1234567891,
"Stat":"A",
"name":"Hello world"
},
{
"id":0,
"Qr":1234567891,
"Stat":"A",
"name":"Hello world"
},
{
"id":0,
"Qr":1234567891,
"Stat":"A",
"name":"Hello world"
},
{
"id":0,
"Qr":1234567891,
"Stat":"A",
"name":"Hello world"
}
]
希望您能帮助我解决该问题。谢谢