Question

react-select刚刚升级到了2.0.0，因此前三页的google结果都是关于旧版本的，甚至是official document，但都没有帮助。

我的选择框可以正确显示所有选项，但是redux表单无法获取该值，并显示警告：Warning: A component is changing a controlled input of type hidden to be uncontrolled.

我想知道我在这里错过了什么...

表单组件：

<Field
  name="residentialAddress"
  label = "Residential Address"
  type="select"
  component={AddressField}
  validate={required}
/>

组件

export class AddressField extends Component {

    searchAddress = input => {
        let options = []

        return myPromise(input)
        .then(suggestions => {
                options = suggestions.map(suggestion => 
                    ({
                        label: suggestion.label,
                        data: suggestion.value
                    })
                )
                return options;             
            }
        ).catch(
            error => { 
                return options = [{ label: "Auto fetching failed, please enter your address manually", value: "", isDisabled: true }];
            }
        );
    };

    render() {
        const {
            input,
            label,
            meta: { touched, error },
            type
        } = this.props;

        return(
            <FormGroup>
                <ControlLabel>{label}</ControlLabel>
                <Async
                    {...input}
                    placeholder={label}
                    isClearable={true}   
                    getOptionValue={(option) => option.residentialAddress}
                    onChange = { value => input.onChange(value.data) }
                    loadOptions={this.searchAddress}                   
                />
                { touched && error && <span>{error}</span> }
            </FormGroup>
        )
    }

Answer 1

解决方案：只需删除{...input}中的<Async>。

与我们需要传递{input}的常规自定义Field组件不同，react-select Async组件似乎很好地照顾了自己，并且不需要任何干预。也许有人可能会以更专业的方式对其进行解释...

遇到这个问题的人也值得一提：带有承诺的loadOptions用于要求对象{options: options}作为返回类型。现在，它变为仅数组（如我的代码中的options）。但是我没有找到任何提及这一文件的文件。

希望这会有所帮助。

使react-select 2.0.0 <async>与redux-form <field>一起使用

1 个答案: