Question

我有一个React组件，其中onChange事件附加到表中的每个select元素。这些select元素还有select2 jquery库作用于它们。无论出于何种原因，事件都没有被触发（控制台中也没有错误）：

import select2 from 'meteor/natestrauser:select2';

export default class MyComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    executeSelectedOption(e){
        console.log("Worked!");
    }

    componentDidUpdate(){
        $("select.js-example-placeholder-single").select2({
            minimumResultsForSearch: Infinity
        });
    }

    render() {
    var results = this.props.data;
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {results.map(function(d, index) {
                        return (
                            <tr key={d._id}>
                                <td>{d.title}</td>
                                    <td>
                                        <select onChange={this.executeSelectedOption.bind(this)} className="js-example-placeholder-single">
                                            <option value="">...</option>
                                            <option value="1">Do this</option>
                                            <option value="2">Do that</option>
                                        </select>
                                    </td>
                                </tr>
                            )
                        }, this)}
                    </tbody>
                </table>
            </div>
        );
    }
}

Answer 1

我发现使用以下用于Select2的NPM包装提供了一个直接的解决方法。

https://github.com/rkit/react-select2-wrapper

React - onChange事件未在select2列表上触发

1 个答案: