提交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