Error on Creating custom ReferenceInput with separ

问题:

I'm trying to creating my ReferenceInput which contains SelectInput inside of it.

The code below is works perfectly (Please focus at ReferenceInput)

However, I would like to separate it into another component and pass data as props. I made it like this.

When I run it, this error occurs

in this file https://github.com/marmelab/admin-on-rest/blob/49a616c93d1ee5ea0bfa3c5f7abea0bb29c8d01c/src/mui/input/ReferenceInput.js#L243

What wrong did I do ?

Thanks

回答1:

Input components are using Redux-Form for actually rendering the form and connecting the application state to your input component.

The input props is passed by ReferenceInput behind the scenes to its child.

If you want to create the child then you need to do something like below. This is code from my application but I am sure you will see the pattern.

const TaleGenreInput = ({style, text, ...props}) => {
  return (
    <div style={style.container} >
      <span style={style.span}>{text}:&nbsp;</span>
      <ReferenceInput {...props} reference="genres" >
        <GenreInputGroup {...props} style={style} elStyle={style.elStyle} optionText='name' />
      </ReferenceInput>
    </div>
  )
}

const GenreInputGroup = ({style, elStyle, optionText, ...rest}) => {
  return (
    <div>
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
    </div>
  )
}

the {...rest} makes sure all props being passed from the parent go into the SelectInput. You can also console log its value to see everything it contains. Helps a lot with debugging.