下拉级联获取选中值

Question

我有下面的代码，我试图在其中实现下拉级联：-

import React, { Component } from 'react';
import { useHistory } from "react-router-dom";

class clusterServersDropdown extends Component {
    constructor(){
        super();
        this.state = {
            clusterslist:[],
            servertype:[],
            selectcluster:'',
        };
    }
    componentDidMount(){
        this.setState({
            clusterslist:[
                {label: "cluster1", servertype:["test1","test2","test3"]},
                {label: "cluster2", servertype:["test1","test2","test3"]},
            ]
        });
    }
    selectclusterChange(e){
        this.setState({selectcluster:e.target.value});
        this.setState({servertype: this.state.clusterslist.find(x => x.label===e.target.value).servertype })
    }

    routeChange = (e) => {
        console.log(this.state.selectcluster)
        console.log(this.state.servertype)
      };

    render(){
        return(
            <div>
                <center>
                    <h1>
                        Implement cascading Dropdown list
                        <h2>
                            ReactJS tutorials
                            <hr />
                                <select value={this.state.selectcluster} onChange={this.selectclusterChange.bind(this)}>
                                    <option>
                                        -- Select --
                                    </option>
                                    {this.state.clusterslist.map(x => {
                                        return <option>
                                            {x.label}
                                        </option>
                                    })}
                                </select>
                                <select value={this.state.servertype} onChange={this.routeChange}>
                                    <option>
                                    --------selection disabled------
                                    </option>
                                    {
                                        this.state.servertype.map(
                                            x => {
                                                return <option>
                                                    {x}
                                    </option>
                                            }
                                        )
                                    }
                                </select>
                        </h2>
                    </h1>
                </center>
            </div>
        )
    }
}

export default clusterServersDropdown;

在这种情况下，我可以获得如下输出：-

现在我可以打印第一级 selected 值和其他下拉列表的所有其他值。现在假设如果我从第二个下拉列表中 select test1，我如何获取这个 selected 值。

Answer 1

有几件事需要解决；

您需要为所选服务器保留状态值 selectserver。

    this.state = {
      ...
      selectserver: "",
      ...
    };

routeChange 处理函数应该更新 selectserver。

  routeChange = (e) => {
    this.setState({ selectserver: e.target.value });
  };

服务器选择需要以this.state.selectserver为值。

<select
     value={this.state.selectserver}
     onChange={this.routeChange}
>
  ...
  ...
</select>

Code Sandbox

下拉级联获取选中值

Dropdown cascading fetch the selected value

cascadingdropdown

reactjs