素材UIテキストフィールドi番目の再来票発行

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; 

しかし、私が値を書いているときにフォームに提出すると、フォームにNO VALUESがあります。私は何が欠けていますか？私はあなたがコンポーネントののonChange小道具を使用していないと思います

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

コンパイルでエラーを示している：私はこれを使用しdicumentationから

。

onChange：テキストフィールドの値が変更されたときに発生するコールバック関数です。

変更を送信し、reduxコンテナにデータを更新する必要があります。

あなたはReduxのフォームにカスタムフィールドを使用したい場合は、Reduxのフォームは、あなたが onChangeなどのように、両方の小道具にアクセスすることができます

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

Answer 2

、だけでなく、他のメタデータ（のような形をしている場合触れられたかどうか）。これらの異なる種類の小道具は、タイプに応じてグループ化されています。興味深いのは、通常の入力要素（onChange、value、typeなど）に関連付けられているすべての属性が、props.inputにグループ化されていることです。したがっての<TextField />コンポーネントに渡すには、propsにスプレッド演算子（...）を直接使用することはできません。 props.inputで使用する必要があります。

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

また<TextField />を期待は必ずしもReduxのフォームはあなたを提供onChange方法と同じシグネチャを持っていないonChange方法その事実に対処する必要があります。だから、私はoutlined in this postのように、それらを一緒に働かせるために手作業をしなければならないかもしれません。 Redux-FormのonChangeとMaterial-UI TextFieldの両方のドキュメントをそれぞれ読んでおく必要があります。

また、material-uiコンポーネントの場合、実際には既にlibrary that has done that manual work for you: redux-form-material-uiが存在していることがわかります。