在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中創建一個保存數據的表單

回答

相關問題