我是一个新手,我想做以下的事情。
我想创建一个简单的用户名和密码表单,然后从用户名和密码表单中添加数据,并将其显示在同一个页面的网格中。然后每当我添加一个用户(用户名和密码)时,更新网格。
所以这里是我的表单,我只得到用户名。
<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"
}
]
希望你能帮我解决这个问题,谢谢你。
这里是一个在Code Sandbox上创建的工作示例。
重要的事情是:
Product
.getJson
文件,我用给定的函数创建了一个,基本上是从已经解析的数据中加载。不要用一个变量重复相同的数据。ComponentDidMount
来初始绑定网格,使用创建事件。onSubmit
事件。onSubmit
你得到已经绑定的项目,从文本框中推送你的新项目信息,然后更新状态,更新ui。然后更新状态,更新ui.jpg文件。import React from "react";
import {
GridComponent,
ColumnsDirective,
Page,
Inject
} from "@syncfusion/ej2-react-grids";
import productsApi from "./getJson";
export default class Products extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
this.userNameChanged = this.userNameChanged.bind(this);
this.created = this.created.bind(this);
this.grid = null;
this.state = {
QrCode: "",
newProducts: [],
userName: ""
};
}
handleSubmit(event) {
event.preventDefault();
let products = this.state.newProducts;
products.push({
id: 0,
Qr: 1234567891,
Stat: "A",
name: this.state.userName
});
this.setState({
newProducts: products
});
this.grid.refresh();
}
userNameChanged(evt) {
this.setState({
userName: evt.target.value
});
}
created(){
productsApi.getAll().then(data => {
console.log("x", data);
this.setState({
newProducts: data
});
this.grid.refresh();
});
}
render() {
console.log(this.state.newProducts);
return (
<div>
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Enter username</label>
<input
onChange={this.userNameChanged}
value={this.state.userName}
id="username"
name="username"
type="text"
/>
<button>Send data!</button>
</form>
</div>
<div style={{ margin: "10%", marginTop: "5%" }}>
<GridComponent
ref={g => (this.grid = g)}
dataSource={this.state.newProducts}
created={this.created}
allowPaging={true}
pageSettings={{ pageSize: 100 }}
>
<Inject services={[Page]} />
</GridComponent>
</div>
</div>
);
}
}
getJson文件。
const productsApi = {
getAll: function() {
//some ajax request
return Promise.resolve([
{
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"
}
]);
}
};
export default productsApi;
更新了codesandbox。https:/codesandbox.iosmagical-euclid-o7ire。
请看这个例子,我在这里使用了 material ui
输入字段和表格。
import React, {useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
export default function FormExample() {
const [rows, setRows] = useState([]);
const [row, setRow] = useState({
username: '',
password: ''
});
function changeHandler(event) {
setRow({...row, [event.target.name]: event.target.value});
}
return (
<div>
<form noValidate autoComplete="off">
<TextField id="username" name="username" label="Username" onChange={changeHandler}/>
<TextField id="password" name="password" label="Password" onChange={changeHandler}/>
<Button variant="contained" color="primary" onClick={() => {
let data = [...rows];
data.push(row);
setRows(data);
}}>
Save
</Button>
</form>
<h3>User List</h3>
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Username</TableCell>
<TableCell>Password</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell>{row.username}</TableCell>
<TableCell>{row.password}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</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数据并将其显示在其中,这很好,但我想要的是,每次我在表单中添加用户并提交时,最终的数据都会进入一个名为newProducts[]的统计变量,然后我再将其显示在我的网格中。"componentDidMount() "中的代码只是一个随机的代码,我试图将json文件中的数据传递到变量newProducts中,这样我就可以将其显示在网格中,但它并不工作。
这是我的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"
}
]