別のコンポーネントを使用してカスタムReferenceInputを作成する際のエラー

Question

内部でSelectInputを含むReferenceInputを作成しようとしています。

以下のコードは完璧に動作（ReferenceInputにフォーカスしてください）

あるしかし、私は別の成分に分離し、小道具などのデータを渡したいです。私はこれのように作った。

私はそれを実行すると、このエラーは、このファイルには、私は何が間違っをしました https://github.com/marmelab/admin-on-rest/blob/49a616c93d1ee5ea0bfa3c5f7abea0bb29c8d01c/src/mui/input/ReferenceInput.js#L243

を

を発生しますか？

おかげ

Answer 1

入力コンポーネントは、実際にフォームをレンダリングして、入力コンポーネントにアプリケーションの状態を接続するためのReduxのフォームを使用しています。

入力小道具は、その背後のReferenceInputによって子に渡されます。

子供を作成する場合は、以下のようにする必要があります。これはアプリケーションのコードですが、パターンが表示されるはずです。

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

{... rest}は、親から渡されたすべての小道具がSelectInputに入ることを確認します。また、その値をログに記録して、その内容をすべて表示することもできます。デバッグで多くの助けになります。