Redux-form v6でカスタムコンポーネントに正しく渡す方法

Question

私はフォームをredux-form v6.7に更新しようとしていますが、私はこの部分について頭を悩ませています。ここで

<div className="col-md-12"> 
    <Field name="name" component={renderSelect}/> 
</div> 

は、「名前」という名前のフォームの小道具と明らかに反応する - Reduxの以前のバージョンで正常に働いていた私のコンポーネントです：

は、私はそうのような選択コンポーネントをレンダリングしたいと

<VirtualizedSelect 
       {...domOnlyProps(name)} 
       filterOptions={itemsFilter} 
       options={this.state.items.items} 
       onChange={name.onChange} 
       value={name.value} 
       name="name" 
       placeholder="Name" 
       onBlur={() => name.onBlur(name.value)} 
       autoBlur={true} 
       simpleValue={true} 
       multi={true} 
       clearable={false} 
       onBlurResetsInput={false} 
       onCloseResetsInput={false} 
       delimiter="|" 
       showNewOptionAtTop={false} 
       selectComponent={Creatable} 
       promptTextCreator={(label) => {return "Search for " + label}} 

      /> 

これで、このコンポーネントをrenderSelect（）関数でラップしようとしています。しかし、カスタムコンポーネントに必要な小道具を正しく渡す方法がわかりません。どの小道具を渡すべきですか、どの小道具がデフォルトで渡されますか？

const renderSelect = ({/*what to pass here?*/ input }) => (
    <FormGroup controlId="name" role="form" className="col-md-12"> 
     <div className="group selectW" style={{width: '100%'}}> 
      <VirtualizedSelect 
       {...domOnlyProps(name)} 
       filterOptions={itemsFilter} 
       options={this.state.items.items} 
       onChange={name.onChange} 
       value={name.value} 
       name="name" 
       placeholder="Name" 
       onBlur={() => name.onBlur(name.value)} 
       autoBlur={true} 
       simpleValue={true} 
       multi={true} 
       clearable={false} 
       onBlurResetsInput={false} 
       onCloseResetsInput={false} 
       delimiter="|" 
       showNewOptionAtTop={false} 
       selectComponent={Creatable} 
       promptTextCreator={(label) => {return "Search for " + label}} 

      /> 
     </div> 
    </FormGroup> 
); 

ヘルプありがとうございました。

Answer 1

私はそれはいくつかの点

const renderSelect = ({input, items, filter}) => (
    <FormGroup controlId="name" role="form" className="col-md-12"> 
     <div className="group selectW" style={{width: '100%'}}> 
      <VirtualizedSelect 

       filterOptions={filter} 
       options={items} 
       onChange={input.onChange} 
       value={input.value} 
       name={input.name} 
       placeholder="Name" 
       onBlur={() => input.onBlur(input.value)} 
       autoBlur={true} 
       simpleValue={true} 
       multi={true} 
       clearable={false} 
       onBlurResetsInput={false} 
       onCloseResetsInput={false} 
       delimiter="|" 
       showNewOptionAtTop={false} 
       selectComponent={Creatable} 
       promptTextCreator={(label) => {return "Search for " + label}} 

      /> 
     </div> 
    </FormGroup> 
); 

で他人を助けるかもしれないとして、それがどのように見えるの投稿、それを考え出した