재료 UI 텍스트 필드의 i 번째 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> 
); 
}; 

그러나에 ... 사용자 정의

Answer 1

난 당신이 구성 요소의 onchange를 소품을 사용하지 않을 생각하는 나에게 컴파일에 오류가 표시되고 다음 dicumentation에서

내가 이것을 사용했다.

onChange : 텍스트 필드의 값이 변경되면 시작되는 콜백 함수입니다.

변경 사항을 보내고 redux 컨테이너의 데이터를 업데이트해야합니다. 당신이 돌아 오는 형식에 대한 사용자 정의 필드를 사용하려는 경우

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

Answer 2

, 돌아 오는 형태는 또한 onChange 등 하지만 같은 두 소품에이 (같은 형태가 된 경우 다른 메타 데이터에 액세스 할 수 있습니다 만지거나 말거나). 이러한 종류의 소품은 유형에 따라 그룹화됩니다. 흥미로운 점은 일반 입력 요소 (예 : onChange, value, type)와 연결된 모든 속성이 props.input에 그룹화되어 있다는 것입니다. 을 <TextField /> 구성 요소로 전달하면 props에 직접 스프레드 연산자 (...)를 사용할 수 없습니다. props.input에 사용해야합니다.

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

또한 사실과 거래를 할 수 <TextField /> 예상하는 반드시 돌아 오는 형태가 당신을 제공하는 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이 있다는 것을 알고 싶을 수도 있습니다.