Reactjs 提交redux表单值

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

例如：登入表格

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

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

---

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

1-处理输入值的最佳实践是使它们受到控制。这意味着：

而不是

<input type='password' />

你可以：

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

myInputHandler（event.target.value）}
/>

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

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

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

this.setState（{password:event.target.value}）
/>

因此，每当有人键入时，将调用onChange处理程序，以便您的react状态将随输入（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> 

onSubmitHandler（事件）{
event.preventDefault（）
让password=this.state.password
//使用密码或其他输入字段，发送到服务器等。
}
this.onSubmitHandler（事件）}>
this.setState（{password:event.target.value}）
/>

---

希望您能得到所需的信息。

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

从“React”导入React
从“redux form”导入{Field，reduxForm}
常量SimpleForm=props=>{
const{handleSubmit，submiting}=props返回(
log（'your form detail here'，e））}>
名字
姓
提交
) }
导出默认reduxForm（{form:'simple'}）（SimpleForm）

请点击此处了解更多详细信息

---

我将输入的名称作为要使用的键。 然后每次输入更改时，我都会对传递给onChange函数的事件进行分解，并使用名称、值来更新状态。 在表单提交时，确保使用preventDefault（）以避免页面刷新

import React，{Component}来自“React”
类FormExample扩展组件{
建造师（道具）{
超级（道具）
此.state={
formData:{}
}
}
handleInputChange=（{target:{name，value}}}）=>{
这是我的国家({
表格数据：{
…this.state.formData，
[名称]：值
}
})
}
handleFormSubmit=e=>{
e、 预防默认值（）
//这是你的目标
console.log（this.state.formData）
}
render（）{
返回(
)
}
}
常量形式=（{handleSubmit，handleChange}）=>(
提交
)
导出默认表单示例

请发布您遇到问题的代码。请在问题中包含所有相关代码。