javascript - Material ui textfield ith 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

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

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

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

您可能也有兴趣知道 material-ui组件，实际上已经存在一个 library that has done that manual work for you: redux-form-material-ui .