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

Question

我正在尝试在 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>
    );
  }
}

Answer 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 中捕获的值

希望这有帮助