提交redux表格值

Question

我是新的反應和redux技術。現在開始構建一個包含多個redux表單的應用程序。我們希望提交帶有值的簡單表單。

對於前：登錄表單

用戶名：文本輸入字段
密碼：文字輸入欄
Submit按鈕

在字段中輸入值後，點擊提交按鈕，我想要得到的用戶名和對象或json數據中的密碼字段值..以便我可以使用POST方法將其存儲到我的服務器。

現在我們正在使用handleSubmit（），但數據是不是來爲對象

Answer 1

1 -應對輸入值使他們控制的最佳實踐。這意味着：

而不是

<input type='password' /> 

你這樣做：

<input 
    type='password' 
    value={password} 
    onChange={ event => myInputHandler(event.target.value) } 
/> 

值可能會 你的處理函數不一樣，從哪兒來的狀態，終極版狀態或作爲道具等。你存儲它。

我會給你一個例子與反應狀態：

<input 
    type='password' 
    value={this.state.password} 
    onChange={ event => this.setState({ password : event.target.value }) } 
/> 

所以每當有人類型，你的onChange處理器將被調用，這樣你的反應狀態將隨輸入更新（event.target.value） 。

2 -如果您在用戶提交時需要這些值，那麼您需要將這些輸入字段包裝在表單元素中並附上onSubmit處理程序。

onSubmitHandler(event){ 
    event.preventDefault() 
    let password = this.state.password 
    // use password or other input fields, send to server etc. 
} 

<form onSubmit={ event => this.onSubmitHandler(event) }> 
    <input 
     type='password' 
     value={this.state.password} 
     onChange={ event => this.setState({ password : event.target.value }) } 
    /> 
</form> 

希望你得到你需要的東西。

Answer 2

如果使用Redux的存儲狀態，然後使用終極版，從此使用終極版從

import React from 'react' 
import {Field, reduxForm} from 'redux-form' 
const SimpleForm = props => { 
    const {handleSubmit, submitting} = props return (
<form onSubmit={handleSubmit(e=>console.log('your form detail here', e))}> 
    <div> 
     <label>First Name</label> 
     <div> 
      <Field name="firstName" component="input" type="text" placeholder="First Name" /> 
     </div> 
    </div> 
    <div> 
     <label>Last Name</label> 
     <div> 
      <Field name="lastName" component="input" type="text" placeholder="Last Name" /> 
     </div> 
    </div> 
    <div> 
     <button type="submit" disabled={pristine || submitting}>Submit</button>   
    </div> 
</form> 
) } 

export default reduxForm({ form: 'simple'})(SimpleForm) 

去這裏的更多細節 https://redux-form.com

Answer 3

我把輸入的名稱作爲密鑰我想用。 然後每次輸入更改時，我都會將事件傳遞給onChange函數，並使用名稱，值來更新狀態。 表單提交請務必使用preventDefault（）;爲了避免頁面刷新。

import React, { Component } from 'react' 
 

 
class FormExample extends Component { 
 
    constructor(props){ 
 
     super(props) 
 
     this.state = { 
 
      formData: {} 
 
     } 
 
    } 
 

 
    handleInputChange = ({ target: { name,value } }) => { 
 
     this.setState({ 
 
      formData: { 
 
       ...this.state.formData, 
 
       [name]: value 
 
      } 
 
     }) 
 
    } 
 

 
    handleFormSubmit = e => { 
 
     e.preventDefault() 
 
     // This is your object 
 
     console.log(this.state.formData) 
 
    } 
 

 
    render() { 
 
     return(
 
      <div> 
 
       <Form 
 
        handleSubmit={this.handleFormSubmit} 
 
        handleChange={this.handleInputChange} 
 
       /> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
const Form = ({ handleSubmit, handleChange }) => (
 
    <form onSubmit={handleSubmit}> 
 
     <input onChange={handleChange} name="username" type="text" placeholder="Username" /> 
 
     <input onChange={handleChange} name="password" type="password" placeholder="Password" /> 
 
     <button>Submit</button> 
 
    </form> 
 
) 
 

 
export default FormExample