提交redux表单值

Question

我不熟悉react和redux技术。现在开始构建一个包含多个redux表单的应用程序。我们希望提交带有值的简单表单。

例如：登录表单

用户名：文本输入字段
密码：文本输入字段
提交按钮

在字段中输入值并单击submit按钮后，我想在object或json数据中获取用户名和密码字段值。。这样我就可以用POST方法将它存储到我的服务器上。

现在我们正在使用handleSubmit（），但数据不是作为对象提供的

Answer 1

我将输入的名称作为要使用的键。然后每次输入更改时，我都会对传递给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

Answer 2

如果您使用redux存储状态，则使用redux from，然后使用redux from

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

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> 

希望你得到你需要的。