test.js

gistfile1.txt

const SelectProvince = ({ provinces, value, onChange }) => (
    <select value={value} onChange={onChange}>
        {provinces.map((pro, index) => {
            return (
                <option value={pro} key={index}>
                    {pro}
                </option>
            );
        })}
    </select>
);

const SelectCity = ({ cities, value, onChange }) => (
    <select value={value} onChange={onChange}>
        {cities.map((city, index) => {
            return (
                <option value={city} key={index}>
                    {city}
                </option>
            );
        })}
    </select>
);

class AwesomeSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            provinceValue: this.props.data.province[0],
            cityValue: this.props.data[this.props.data.province[0]][0],
            cities: this.props.data[this.props.data.province[0]]
        };
    }

    render() {
        return (
            <div>
                <lable> 省 </lable>
                <SelectProvince
                    provinces={this.props.data.province}
                    value={this.state.provinceValue}
                    onChange={e => {
                        this.setState({
                            provinceValue: e.target.value,
                            cityValue: this.props.data[e.target.value][0],
                            cities: this.props.data[e.target.value]
                        });
                    }}
                />
                <lable> 城市 </lable>
                <SelectCity
                    cities={this.state.cities}
                    value={this.state.cityValue}
                    onChange={e => {
                        this.setState({ cityValue: e.target.value });
                    }}
                />
                {this.state.provinceValue} ---- {this.state.cityValue}
            </div>
        );
    }
}
const data = {
    on: ["toronto", "markham", "kingston"],
    bc: ["richmond", "vancouver", "trail"],
    ab: ["edmonton", "leduc"],
    province: ["on", "bc", "ab"]
};
ReactDOM.render(<AwesomeSelect data={data} />, document.getElementById("root"));