Javascript 重用如何对不同状态的组件作出反应

我正在创建一个列表，显示具有不同输入的不同行。不同的输入是以选定的为条件的，但我的问题是它们在所有行中都会改变。。。我不知道怎样才能做好

例如：

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

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

此处，父组件代码：

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

类FilterByDateCondition扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
dateTypeCondition:“日历”，
};
}
componentDidMount（）{
$（'.date条件选择'）。选择2({
宽度：“100%”，
搜索的最小结果：无穷大，
})
常数s=这个；
$（'.date-type-condition-select'）。选择2({
宽度：“100%”，
搜索的最小结果：无穷大，
}).打开（“选择2：选择”，功能（e）{
设state=s.state；
state.dateTypeCondition=$（this.val（）；
s、 设置状态（状态）；
});
}
_drawDateTypeCondition（dateTypeCondition）{
如果（dateTypeCondition==“日历”）{
返回
}
else if（dateTypeCondition==“表达式”）{
返回
}
}
render（）{
返回(
{gettext（“日历”）}
{gettext（“表达式”）}
{"">{">"}
{"=="}
{this.\u drawDateTypeCondition（this.state.dateTypeCondition）}
);
}
}

子组件显示在函数

\u drawDateTypeCondition

如何重用组件

---

非常感谢！！！：]

我认为这与您使用的类有关。两个父组件中的select标记具有相同的类，并且由于您在

componentDidMount

函数中使用类选择器触发操作，因此选择哪个select并不重要，只要它具有该类

我认为更好的方法是使用不同的标识符，或者向select标记添加onClick或onSelect事件，这些标记触发单独定义的成员函数

---

我希望这是有意义的。

这非常有效！！非常感谢您的帮助。我正在考虑改变，因为重复ID是一种不好的做法…但我认为这不会解决问题。谢谢！！！