在redux中获取<Field>
值,需要使用redux-form库来处理表单数据。redux-form是一个用于处理表单状态的Redux扩展库,它提供了一种简单的方式来管理表单数据,并将其存储在Redux store中。
以下是在redux中获取<Field>
值的步骤:
formReducer
导入并添加到你的根reducer中来实现这一点。import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers({
form: formReducer
});
export default rootReducer;
Field
组件来渲染表单字段。Field
组件接受一个name
属性,用于指定字段的名称。import React from 'react';
import { Field } from 'redux-form';
const MyForm = () => {
return (
<form>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" />
</div>
{/* 其他表单字段 */}
</form>
);
};
export default MyForm;
connect
函数来连接表单组件到Redux store。这将使表单组件能够访问Redux store中的表单数据。import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
const MyForm = (props) => {
// 通过props获取表单值
const { handleSubmit, pristine, submitting, values } = props;
const onSubmit = (data) => {
// 处理表单提交
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" />
</div>
{/* 其他表单字段 */}
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
</form>
);
};
// 使用reduxForm高阶函数包装表单组件
const MyFormContainer = reduxForm({
form: 'myForm' // 表单名称
})(MyForm);
// 使用connect函数连接表单组件到Redux store
export default connect()(MyFormContainer);
现在,你可以在<Field>
组件中使用name
属性来指定字段的名称,并通过props获取表单值。例如,你可以在onSubmit
函数中访问values
属性来获取整个表单的值。
这是一个基本的示例,你可以根据你的具体需求进行调整和扩展。关于redux-form的更多详细信息和用法,请参考redux-form官方文档。
领取专属 10元无门槛券
手把手带您无忧上云