在 React 中创建一个保存数据的表单

Posted 2023-02-22

【中文标题】在 React 中创建一个保存数据的表单

【英文标题】：Creating a form in React that saves data

【发布时间】：2018-02-03 13:12:52

【问题描述】：

我正在尝试在 react 中创建一个客户详细信息表单（当前使用 react-json-form），我可以在其中重用输入中的值来创建应用程序可以引用的保存文件。我已经创建了表单并可以输出结果，但我不确定如何保存输入值以供将来使用或在保存后将其回调。

如果有人对执行此操作的表单有任何建议或示例，我将不胜感激。

我的代码如下：

import React,  Component  from 'react';
import JSONTree from 'react-json-tree';
import  BasicForm as Form, Nest, createInput  from 'react-json-form';

const Input = createInput()(props => <input type="text" ...props />);

const UserFields = () => (
  <section>
    <h3>User</h3>
    <div>Name: <Input path="name" /></div>
    <div>Email: <Input path="email" /></div>
  </section>
);

export default class ExampleForm extends Component 
  state =  data:  ;

  updateData = data => this.setState( data );

  render() 
    return (
      <Form onSubmit=this.updateData>
        <Nest path="user">
          <UserFields />
        </Nest>
        <button type="submit">Submit</button>
        <JSONTree data=this.state.data shouldExpandNode=() => true />   
      </Form>
    );
  

【参考方案1】：

更简单的解决方案是使用表单，例如 semanti-ui-react 表单，将信息存储到状态 onChange，然后将信息转换为 JSON 进行存储。

import  Form, Button  from 'semantic-ui-react'

export default class App extends Component 
  constructor() 
    super()

    this.state = 
      name: "",
      email: ""
    

handleChange = (e, name, value) => 
  console.log(name, value)
  this.setState([name]: value)

render() 
  return (
    <div>
      <Form onSubmit=this.sendDataSomewhere>
        <Form.Field>
          <Form.Input name="name" value=this.state.name onChange=this.handleChange/>
        </Form.Field>
        <Form.Field>
          <Form.Input name="email" value=this.state.email onChange=this.handleChange/>
        </Form.Field>
        <Button type="submit">Submit</Button>
       </Form>
     </div>
    )
  

我使用一种动态方法，使用 name 和 val 属性从不同字段接收输入。然后 this.state.whatever 可以访问 state 中捕获的值

希望这有帮助

【讨论】：

谢谢，这看起来很有希望。唯一的问题似乎是，当我尝试使用代码时，它给了我错误的意外标记并指向：“this.state = ”你会碰巧知道是什么原因造成的吗？

每当您开始在该字段中输入时，它都会改变状态。