javascript - 在 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

访问状态中捕获的值

希望这有帮助