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;

但是当我写这个价值并提交我的表格时，表格没有任何价值。我错过了什么？

从我使用的dicumentation：

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>
  );
};

但它在...自定义

的编译中显示错误

Answer 1

如果您想为Redux-Form使用自定义字段，Redux表单可让您访问onChange等道具，以及其他元数据（如果形式是否被触及）。这些不同类型的道具根据类型进行分组。有趣的是，与普通输入元素相关的所有属性（如onChange，value，type）都归为props.input。因此，要将那些传递给<TextField />组件，您无法直接在...上使用传播运算符（props）。您必须在props.input上使用它。

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

您可能还必须处理onChange期望的<TextField />方法与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。

Answer 2

我认为你没有使用组件的onChange道具。

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

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

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

材料ui textfield ith redux形式问题

2 个答案: