Question

我正在创建一个列表，显示具有不同输入的不同行。差异输入以所选择的为条件，但我的问题是它们在所有行中发生变化......而且我不知道如何做得好。

一个例子：

我有一个父元素（橙色），并且根据第一个选择元素中的选择，子更改（蓝色）。

但问题是，当我选择一个选项时，不同行的所有子项都会改变（蓝色）。

这里，父组件代码：

class FilterByDateCondition extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dateTypeCondition: "calendar",
        };
    }

    componentDidMount() {
        $('.date-condition-select').select2({
            width: '100%',
                minimumResultsForSearch: Infinity,
        })

        const s = this;
        $('.date-type-condition-select').select2({
            width: '100%',
            minimumResultsForSearch: Infinity,
        }).on("select2:select", function (e) {
            let state = s.state;
            state.dateTypeCondition = $(this).val();
            s.setState(state);
        });
    }

    _drawDateTypeCondition(dateTypeCondition) {
        if (dateTypeCondition == "calendar") {
            return <DateCalendar/>
        }
        else if (dateTypeCondition == "expression") {
            return <DateExpression/>
        }
    }

    render() {
        return (<div className="row">
                <div className="col-md-3">
                    <select className="date-type-condition-select">
                        <option value="calendar">{gettext("Calendar")}    </option>    
                        <option value="expression">{gettext("Expression")}</option>
                    </select>
                </div>
                <div className="col-md-2">
                    <select className="date-condition-select">
                        <option value="<">{"<"}</option>
                        <option value=">">{">"}</option>
                        <option value="==">{"=="}</option>
                    </select>
                </div>
                <div className="col-md-7">
                    {this._drawDateTypeCondition(this.state.dateTypeCondition)}
                </div>
            </div>
        );
    }
}

chidren组件显示在函数_drawDateTypeCondition

中

如何重用组件??

非常感谢!!! ：]

Answer 1

我认为这与您正在使用的课程有关。两个父组件中的select标签具有相同的类，并且由于您正在使用类选择器来处理您在componentDidMount函数中的操作，因此只要具有该类，选择哪个选项都无关紧要。 / p>

我认为更好的方法是使用不同的标识符或在select标签上添加onClick或onSelect事件，从而触发单独定义的成员函数。

我希望这是有道理的。

重用如何反应具有不同状态的组件

1 个答案: