Reactjs React需要帮助同步融合数据网格

我是一个新的反应者，我正在努力做到以下几点

我想创建一个简单的用户名和密码表单， 然后添加用户名和密码表单中的数据，并将其显示在同一页面的网格中。然后在每次添加用户（用户名和密码）时更新网格

这是我的表单，我只获取用户名：

        <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, {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，{useState}来自“React”；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮”导入按钮；
导出默认函数FormExample（）{
const[rows，setRows]=useState（[]）；
const[row，setRow]=useState({
用户名：“”，
密码：“”
});
函数changeHandler（事件）{
setRow（{…行，[event.target.name]：event.target.value}）；
}
返回(
{
让数据=[…行]；
数据推送（row）；
设置行（数据）；
}}>
拯救
用户列表
用户名
密码
{rows.map（（row）=>(
{row.username}
{row.password}
))}
);
}

好的，下面是我的代码：

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>

      );
    }
  }

---

这是一个在代码沙盒上创建的工作示例

重要的是,

• 您的类名应该像

  Product

  一样大写
• 由于您尚未发布

  getJson

  文件，因此我创建了一个具有给定函数的文件，该函数基本上从已解析的文件加载数据。不要用变量复制相同的数据
• 然后，由于您使用的是SyncFusion网格，因此存在创建的事件，不要使用

  ComponentDidMount

  最初绑定网格，请使用创建的事件
• 网格在此实例中不会自动刷新，您需要使用SyncFusion方法来完成。这是通过获取ref并使用它访问实例和调用refresh来实现的
• 您可以对文本框使用受控输入，而不是在

  onSubmit

  event中使用事件参数
• 在

  onSubmit

  中，您将获得已绑定的项目，并使用文本框中的信息推送新项目。然后更新状态并更新ui

---

更新的codesandbox，

这取决于您处理的数据类型。如果您有一个保存信息的DB，那么您需要触发RESTAPI之类的东西，并使用另一个API绑定DB的内容。或者，如果您没有将其存储在任何地方，请使用状态或状态容器，如redux。您也可以使用上述方法的组合。我正在将其意外保存到状态，但由于某些原因网格不会显示。您可以显示您尝试的代码或代码示例吗？您应该通过编辑将其张贴在您的问题下，因为这是您问题的一部分。提交表单时，您设置了一个名为QrCode的状态键，但是它没有被使用。你能展示一下你的json文件结构和getJson文件吗？很抱歉没有编辑我的原始帖子，我对这个很陌生。你从getJson文件加载什么？这是相同的json数据吗？另外，通过单击问题下方的编辑链接，尝试用代码更新您的问题，以便其他人能够了解谁有相同的问题。

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>

      );
    }
  }

[
    {
        "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"

    }

]

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>
    );
  }
}

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;