时间戳

首页 > 解决方案 > 传入新道具时重置反应选择下拉菜单

reactjs - 传入新道具时重置反应选择下拉菜单

问题描述

我想清除获取新道具下拉列表中的值。目前，即使我展开下拉列表，以前的值仍然可见，我可以看到新值。

import React from 'react';
import Select from 'react-select';
import axios from 'axios';    

class KeydateDropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            optionList: []
        };
    };

    componentDidUpdate(prevProps) {
        let vesselname = this.props.vesselname;
        if (prevProps.vesselname !== vesselname) {
            let keydateList = [];
            this.setState({
                optionList: keydateList
            });
            axios.get('list-keydates', {
                params: {
                    vesselname: vesselname
                }
            })
                .then((response) => {
                    let data = response.data['intervention'];
                    data.forEach((element) => {
                        keydateList.push({ value: element, label: element });
                    });
                    this.setState({ optionList: keydateList });
                })
        }
    }


    render() {

        return (
            <Select
                isDisabled={this.props.isDisabled}
                onChange={this.props.handleKeydateChange}
                options={this.state.optionList}
                className={styles.dropdown}
            />
        );
    }

}

export default KeydateDropdown;

我已经确认第一个清除 呼叫的setState()内部componentDidUpdateoptionListrender()

编辑：这是代码框

标签： reactjsreact-select

解决方案

Select您忘记在组件上显式设置值。您必须传递this.state.selectedKeydate到KeydateDropdowninMainInputBar然后将该值传递给Select组件：

在MainInputBar.jsx：

      keydateDropdown = (
        <KeydateDropdown
          vesselname={this.state.selectedVessel.value}
          selectedKeydate={this.state.selectedKeydate}
          handleKeydateChange={this.handleKeydateChange}
          value={this.state.selectedKeydate}
        />
      );

在KeyStateDropdown.jsx：

      <Select
        isDisabled={this.props.isDisabled}
        onChange={this.props.handleKeydateChange}
        options={this.state.optionList}
        className={styles.dropdown}
        value={this.props.value}
      />

我将您的沙箱分叉并在此处修复：https ://codesandbox.io/s/happy-einstein-55klv

推荐阅读