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

可以访问状态中捕获的值

希望这有帮助

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

1 个答案: