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

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

如果任何人有任何建议或这样做的形式的例子，那么我会非常感激。

我的代码如下：

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> 
    ); 
    } 
}

来源

2017-08-25 CJNotts

更简单的解决方案将是使用一个表格，就像一个semanti-UI-反应形式，将信息存储到状态的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> 
    ) 
    } 
}

我使用动态方法从不同的字段使用名称和val属性接收输入。在状态捕获的值然后通过this.state.whatever

希望访问这有助于

来源

2017-08-25 13:35:22

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

每当你开始在字段中输入时，它将改变状态。 –

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

回答

相关问题