Я новичок в реакции, и я пытаюсь сделать следующее.
Я хочу создать простую форму имени пользователя и пароля, затем добавить данные из формы имени пользователя и пароля и отобразить их в сетке на той же странице. Затем обновляйте сетку каждый раз, когда я добавляю пользователя (имя пользователя и пароль).
Итак, вот моя форма, в которой я получаю только имя пользователя:
<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"
}
]
Надеюсь, вы поможете мне решить эту проблему. Спасибо