React需要帮助Syncfusion数据网格。

Question

我是一个新手，我想做以下的事情。

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

所以这里是我的表单，我只得到用户名。

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

    }

]

希望你能帮我解决这个问题，谢谢你。

Answer 1

这里是一个在Code Sandbox上创建的工作示例。

重要的事情是：

• 你的班级名称应该是大写的，如 Product.
• 由于你还没有发表 getJson 文件，我用给定的函数创建了一个，基本上是从已经解析的数据中加载。不要用一个变量重复相同的数据。
• 那么既然你使用的是 SyncFusion 网格，有创建事件，不要用 ComponentDidMount 来初始绑定网格，使用创建事件。
• 在这种情况下，网格不会自动刷新，你需要使用 SyncFusion 的方式。那就是通过获取一个 ref，然后用它来访问实例并调用刷新。
• 你可以在文本框中使用受控输入，而不是使用事件参数。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。

Answer 2

请看这个例子，我在这里使用了 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>
    );
}

Answer 3

好了，这里是我的代码。

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"

    }

]