Question

我在父组件中有以下react-select-plus组件。

<Select
onCloseResetsInput={false}
onBlurResetsInput={false}
ref={(select) => {this.select = select;}}
value={this.state.searchValue}
filterOptions={false}
onInputKeyDown={this.onInputKeyDown}
instanceId="search"
className="improved-search"
name="form-field-name"
clearable={false}
placeholder="search"
searchPromptText="search"
onBlurResetsInput={false}
noResultsText="no results"
scrollMenuIntoView={false}
arrowRenderer={this.arrowRenderer}
isLoading={this.state.searchIsLoading}
options={this.state.searchOptions}
onInputChange={this.onInputChange}
onChange={this.selectEvent}
autoBlur={true}
/>

我想要做的是更新/清除父组件的componentWillReceiveProps方法中的输入值，如下所示：

componentWillReceiveProps(newProps) {
    if (newProps.location.pathname.indexOf('q=') === -1) {
        this.setState({
            searchValue: null
        })
    }   
}

React-select-plus声称是一个受控组件，但至少在我的情况下更新了父组件状态（即this.state.searchValue，它作为“value”prop传递给react-select-plus）不更新Select组件的输入。从GitHub查看Select.js的源代码，组件不会更新其自己的componentWillReceiveProps中的值。

我在这里遗漏了什么或者我自己的某些方法是否由于某种原因覆盖了输入更新？

Answer 1

您需要以不同的方式处理React-Select的值和onChange。

让我们考虑将对象存储在State / Redux中的form_data看起来像这样：

const onChange = e => {
    /**
     * A general purpose onChange handler for inputs.
     * @param   {Object} e      The onChange event of input.
     * @return  {Object}        An Object containing name and value of the event target.
     */
    return {
        name: e.target.name,
        value: e.target.type === 'checkbox' ? e.target.checked : e.target.value,
    };
    // Put the value it's returning in your state/redux store, depending on your application
};

考虑到您有一个类似于以下内容的onChnage处理程序：

mySelect

现在考虑输入的名称为const OPTIONS = ['option1, option2', ...]; <Select isDisabled={form.saving} // disable it if form is saving id='id_mySelect' name='mySelect' label='My Select' {/* if your state/redux store has a value for it, then set its value to correct option NOTICE: It requires an object in proper format else leave it empty */} value={ form.data.mySelect ? { label: form.data.mySelect, value: form.data.mySelect } : null } {/* See below for explanation of onChange */} onChange={(option, event) => { // console.log({option, event}); let value=''; {/* If react select is being cleared then value is empty string otherwise its the value of selected option */} if(event.action!=='clear') value = option.value; return onChange({target: {name: 'mySelect', value: value}}); }} options={OPTIONS.map(x => ({label: x, value: x}))} placeholder='My Select' isClearable />，那么您的React-Select组件应如下所示：

onChange

为什么在React-Select中出现怪异的onChange：

通常，event.target的输入会得到一个js事件对象，其中包含有关事件，目标等的信息。我们使用onChange来获取其名称和值。

但是，React-Select组件的option提供了两个对象，让我们将它们称为event和console.log({option, event})。
在react select的onChnage的anon函数的第一行中添加{ label: 'selected_options_label' value: 'selected_options_value' }以便自己查看。

选项对象如下：

{
    action: 'select-option',  // its value is 'select-option' or 'clear'
    options: undefined  // its always undefined, not sure why
}

事件对象如下：

{
    ...
    target: {
        ...
        name: 'target_name',
        value: 'target_value'
        ...
    }
    ...
}

由于在我们的onChange处理程序中，我们期望一个类似于以下内容的事件对象：

onChange

但是React-Select并没有提供和这样的事件对象，因此我们需要自己创建一个对象，该对象具有dept = ['Country', 'UK'] df[dept[0]] = dept[1] print (df) Name Skill Age Country 0 Adam C++ 23 UK 1 Beth Java 25 UK 2 Micheal Scala 21 UK 3 Aaron Erlang 23 UK处理程序中所有的东西。因此，在React-Select的onChange中，我们创建了一个匿名函数，该匿名函数以所需格式包含包含名称和值的对象，然后使用该数据调用onChange处理程序，以便将适当的值保存在状态/存储中。

如何通过父组件更新react-select-plus值

1 个答案: