Question

我是新的反应和redux技术。现在开始构建一个包含多个redux表单的应用程序。我们想要提交带有值的简单表单。

例如：登录表格

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

在字段中输入值并单击提交按钮后，我想获取对象或json数据中的用户名和密码字段值..以便我可以使用POST方法将其存储到我的服务器。

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

Answer 1

1 - 处理输入值的最佳做法是控制它们。这意味着：

而不是

<input type='password' />

你这样做：

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

该值可能来自您的州，redux州或道具等。您的处理函数根据您存储的位置而有所不同。

我将以反应状态给你一个例子：

<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存储状态，则使用redux-from然后使用

中的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函数的事件，并使用name，value来更新状态。在表单提交时，请务必使用 preventDefault（）; 以避免页面刷新。

＆＃13;

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

＆＃13;

提交redux表单值

3 个答案: