材料UI文本字段第i个终极版的形式发布

Question

我遇到此问题，我不能处理 我有我与终极版形式 这样做兼容的文本框：

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

我想你没有使用该组件的的onChange道具。

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

您应该发送更改并更新redux容器中的数据。

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

Answer 2

当你想使用自定义字段终极版表格，Redux的形式，您可以访问两个道具像onChange等，还包括其他元数据（比如如果表单已是否触及）。这些不同种类的道具根据类型进行分组。您感兴趣的部分是与正常输入元素相关的所有属性（如onChange,value,type）分组在props.input中。所以要通过那些直至<TextField />组件，您不能直接在props上使用扩展运算符（...）。您必须在props.input上使用它。

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

您可能还不得不面对一个事实，即onChange方法<TextField />预期并不一定有相同的签名onChange方法Redux的形式为您提供。所以你可能需要做一些手工工作才能使它们一起工作，类似于我的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。