首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux-form如何更新Material-UI v4 textField值?

Redux-form是一个用于管理表单状态的库,而Material-UI v4是一个React组件库,提供了一系列UI组件,包括textField文本输入框。在Redux-form中更新Material-UI v4 textField的值,可以通过以下步骤实现:

  1. 首先,确保已经安装了redux-form和material-ui库,并在项目中引入它们的相关组件和依赖。
  2. 在Redux-form中,表单的值是通过Redux store中的state来管理的。因此,要更新textField的值,需要通过Redux-form提供的action和reducer来更新state。
  3. 在Redux-form中,可以使用Field组件来包装textField,并将其与Redux-form的state关联起来。例如:
代码语言:txt
复制
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"的字段关联起来。

  1. 要更新textField的值,可以通过Redux-form提供的change action来触发更新。在组件中,可以使用reduxForm()高阶函数将表单组件连接到Redux-form,并将change action作为props传递给组件。例如:
代码语言:txt
复制
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"字段的值。

  1. 最后,可以在Redux-form的state中获取和使用更新后的textField的值。可以通过reduxForm()高阶函数将表单组件连接到Redux-form,并将表单的值作为props传递给组件。例如:
代码语言:txt
复制
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的更多详细信息和用法,请参考以下链接:

  • Redux-form官方文档:https://redux-form.com/
  • Material-UI v4官方文档:https://material-ui.com/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券