提交redux表单值-Java 学习之路

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

例如：登录表格

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

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

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

3 回答

如果您使用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

回复于 2024-04-26T06:07:12+08:00

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>

希望你得到你需要的东西 .

回复于 2024-04-26T06:07:12+08:00

我把输入的名称作为我想要使用的键 . 然后每次输入更改我解构 event 传递给onChange函数，并使用name，value来更新状态 . 在表单提交时，请确保使用 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

回复于 2024-04-26T06:07:12+08:00

提交redux表单值

3 回答

相关问题