Redux-form是一个用于管理表单状态的库,而Material-UI v4是一个React组件库,提供了一系列UI组件,包括textField文本输入框。在Redux-form中更新Material-UI v4 textField的值,可以通过以下步骤实现:
import { Field } from 'redux-form';
import { TextField } from '@material-ui/core';
// ...
<Field name="myTextField" component={TextField} label="My TextField" />
在上面的代码中,我们使用Field组件将textField包装起来,并将其与Redux-form的state中的名为"myTextField"的字段关联起来。
import { reduxForm } from 'redux-form';
// ...
const MyForm = ({ handleSubmit, change }) => {
const handleChange = (event) => {
change('myTextField', event.target.value);
};
return (
<form onSubmit={handleSubmit}>
<TextField label="My TextField" onChange={handleChange} />
{/* 其他表单字段 */}
<button type="submit">提交</button>
</form>
);
};
export default reduxForm({
form: 'myForm',
})(MyForm);
在上面的代码中,我们定义了一个名为MyForm的表单组件,并使用reduxForm()将其连接到Redux-form。在组件中,我们定义了一个handleChange函数,它会在textField的值发生变化时触发change action来更新Redux-form的state中的"myTextField"字段的值。
import { reduxForm, formValueSelector } from 'redux-form';
// ...
const MyForm = ({ handleSubmit, myTextFieldValue }) => {
// 使用myTextFieldValue
// ...
return (
// ...
);
};
const selector = formValueSelector('myForm');
export default reduxForm({
form: 'myForm',
initialValues: {
myTextField: '初始值',
},
enableReinitialize: true,
})(connect((state) => ({
myTextFieldValue: selector(state, 'myTextField'),
}))(MyForm));
在上面的代码中,我们使用formValueSelector()函数来获取Redux-form的state中的"myTextField"字段的值,并将其作为props传递给组件。
这样,当textField的值发生变化时,Redux-form会更新state中的"myTextField"字段的值,并将其传递给组件,从而实现了更新Material-UI v4 textField的值。
关于Redux-form和Material-UI v4的更多详细信息和用法,请参考以下链接:
领取专属 10元无门槛券
手把手带您无忧上云