javascript - 如何重用具有不同状态的 React 组件

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 事件。

我希望这是有道理的。