选择字段material-ui中的事件监听器

Question

我是新来的反应和材料 - ui。我想创建 2 个相互依赖的选择字段按钮。

第一个字段包含 2 个选项：“蔬菜”和“肉类”。 第二个字段包含“carrot”、“spinach”、“tomato”、“chicken”、“beef”和“pork”。

我希望选择字段像这样工作： 当我在第一个字段中选择“蔬菜”时，第二个字段将只能选择“胡萝卜”、“菠菜”、“番茄”。

当我在第一个字段中选择“肉类”时，第二个字段只能选择“鸡肉”、“牛肉”、“猪肉”。

任何示例程序都会非常有帮助。提前谢谢你。

Answer 1

我发现它是如何使用 javascript 来实现的。但是，我想在打字稿中这样做，因为我的项目需要这样做。有人知道如何将这些代码转换成打字稿吗？

    Form = React.createClass({

// render :: a -> ReactElement
render: function(){
    self = this;
    models = !!this.state.make ? this.state.models[this.state.make.label] : [];
    return <div>

        <SimpleSelect
            placeholder = "Select a make"
            options = {this.state.makes.map(function(make){
                return {label:make, value: make};
            })}
            value = {this.state.make}

            // onValueChange :: Item -> ()
            onValueChange = {function(make) {
                self.setState ({make: make, model: undefined}, function(){
                    self.refs.models.focus();
                });
            }}

            // onFocus :: Item -> String -> ()
            onFocus = {function(item, reason){
                self.setState({focused: true});
            }}

            // onBlur :: Item -> String -> ()
            onBlur = {function(item, reason){
                self.setState({focused: false});
            }}

            // onEnter :: Item -> ()
            onEnter = {function(item){
                if (typeof item == "undefined")
                    alert("you did not select any item");
            }}

            style = {this.state.focused ? {color: "#0099ff"} : {}}/>

        <SimpleSelect
            ref = "models"
            placeholder = "Select a model"
            options = {models.map(function(model){
                return {label: model, value: model};
            })}
            value = {this.state.model}

            // disabled :: Boolean
            disabled = {typeof this.state.make == "undefined"}

            onValueChange = {function(model) {
                self.setState({model: model});
            }}
            style = {{
                marginTop: 20,
                opacity: !!this.state.make ? 1 : 0.5
            }}/>

    </div>
},

// getInitialState :: a -> UIState
getInitialState: function(){
    return {
        focused: false,
        make: undefined,
        makes: ["Bentley", "Cadillac", "Lamborghini", "Maserati", "Volkswagen"],
        model: undefined,
        models: {
            Bentley: ["Arnage", "Azure", "Continental", "Corniche", "Turbo R"],
            Cadillac: ["Allante", "Catera", "Eldorado", "Fleetwood", "Seville"],
            Lamborghini: ["Aventador", "Countach", "Diablo", "Gallardo", "Murcielago"],
            Maserati: ["Bitturbo", "Coupe", "GranTurismo", "Quattroporte", "Spyder"],
            Volkswagen: ["Beetle", "Fox", "Jetta", "Passat", "Rabbit"]
        }
    }
}