材料ui文本字段与redux表单问题

Question

我在这里遇到了一个我无法处理的问题 我有一个与 redux 表单兼容的文本字段 像这样：

const renderTextField = props => (
  <TextField {...props} />
);

我是这样使用它的：

<Field
          id="searchCif"
          name="searchCif"
          component={renderTextField}
          floatingLabelText={SEARCHVIEW_HINT_CIF}
          floatingLabelFixed={false}
          value
        />

然后我在我的容器中写这个：

import { reduxForm } from 'redux-form/immutable';
import { connect } from 'react-redux';
// import { injectIntl } from 'react-intl';
import SearchDefaultView from './views/searchDefaultView';

import { requestCustomerInfo } from './actions/customerActions';

export const mapDispatchToProps = dispatch => (
  {
    requestCustomerInfo: formData =>
      dispatch(requestCustomerInfo(formData))
  }
);

const SearchDefaultReduxForm = reduxForm({
  form: 'customerInfo',  // a unique identifier for this form
})(SearchDefaultView);

const SearchDefaultContainer = connect(
  null,
  mapDispatchToProps
)(SearchDefaultReduxForm);

export default SearchDefaultContainer;

但是当我写值并提交我的表单时，表单没有值。我错过了什么？

根据我使用的文档：

const renderTextField = ({
                           input,
                           label,
                           meta: { touched, error },
                           ...custom
                         }) =>
  <TextField
    hintText={label}
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    {...custom}
  />

const SearchDefaultView = (props) => {
  const { requestCustomerInfo, handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit(requestCustomerInfo)}>
      <Menu
        autoWidth={false}
        style={styleSearchMenu}
      >
        <Divider />
        <Field
          id="searchCif"
          name="searchCif"
          component={renderTextField}
          floatingLabelText={SEARCHVIEW_HINT_CIF}
          floatingLabelFixed={false}
        />
        <br />
        <Field
          id="searchAFM"
          name="searchAFM"
          component={renderTextField}
          floatingLabelText={SEARCHVIEW_HINT_AFM}
          floatingLabelFixed={false}
        />
        <br />
        <RaisedButton
          type="submit"
          fullWidth
          primary
          label={SEARCHVIEW_SEARCH}
        />
      </Menu>
    </form>
  );
};

但它在 ...custom 处显示编译错误

Answer 1

我认为你没有使用组件的 onChange 属性。

onChange：文本字段值改变时触发的回调函数。

您应该分派更改并更新 redux 容器中的数据。

http://www.material-ui.com/#/components/text-field

Answer 2

当您想为 Redux-Form 使用自定义字段时，Redux-form 可以让您访问 onChange 等属性，还可以访问其他元数据（例如，如果表单有是否被触摸）。这些不同类型的道具根据类型进行分组。对您来说有趣的部分是与普通输入元素相关的所有属性（如onChange、value、type）都分组在props.input 中。因此，要将 那些 传递给 <TextField /> 组件，您不能直接在 props 上使用扩展运算符 (...)。您必须在props.input 上使用它。

const renderTextField = props => (
  <TextField {...props.input} />
);

您可能还需要处理这样一个事实：<TextField /> 所期望的 onChange 方法不一定与 Redux-form 为您提供的 onChange 方法具有相同的签名。所以你可能需要做一些手工工作才能让它们一起工作，类似于我的outlined in this post。您必须分别阅读 Redux-Form 和 Material-UI TextField 的 onChange 的文档。

您可能还想知道对于material-ui 组件，实际上已经存在library that has done that manual work for you: redux-form-material-ui。