Question

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

第一个字段包含2个选项：“vegetable”和“meat”。第二个字段包含“胡萝卜”，“菠菜”，“番茄”，“鸡肉”，“牛肉”和“猪肉”。

我希望选择字段的工作方式如下：当我在第一个字段中选择“蔬菜”时，第二个字段只能选择“胡萝卜”，“菠菜”，“番茄”。

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

任何示例程序都会非常有用。提前谢谢。

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"]
        }
    }
}

选择字段材料-ui中的事件侦听器

1 个答案: