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

Question

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

一个例子：

我有一个父元素（橙色），根据第一个选择元素中的选择，子元素会发生变化（蓝色）。

Parent and child element screenshot

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

The problem screenshot

这里，父组件代码：

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>
        );
    }
}

子组件显示在函数_drawDateTypeCondition中

如何复用组件？？

非常感谢！！！ : ]

Answer 1

我认为这与您使用的课​​程有关。两个父组件中的选择标签具有相同的类，并且由于您使用类选择器来触发componentDidMount 函数中的操作，只要具有该类，选择哪个选择都没有关系。

我认为更好的方法是使用不同的标识符或将 onClick 或 onSelect 事件添加到触发单独定义的成员函数的选择标记。

我希望这是有道理的。