如何使用Redux-form v6将props正确传递给自定义组件

时间:2017-05-10 18:46:09

标签: forms reactjs react-redux redux-form

我正在尝试将我的表单更新为redux-form v6.7,而且我很难解开这个部分。

假设我想渲染一个像这样的选择组件:

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

这是我的组件,与之前版本的react-redux一起工作正常,显然有一个名为&#34; name&#34; :

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

帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

我弄清楚了,发布它看起来像什么,因为它可能在某些时候帮助其他人

# test csv data
test_csv <- "x,y,z\n1,2,3\n3,4,4\n5,6,7"

# vector of column names to import
col_names <- c("x", "y")

# create named list of column type specifications ("collectors" in readr-speak)
cols_to_get <- rep(list(col_guess()), 2)
names(cols_to_get) <- col_names

# use do.call() to provide my named list to readr's cols_only() function
readr::read_csv(test_csv, col_types = do.call(cols_only, cols_to_get))