动态地将事件处理程序添加到React.DOM元素

Kimmo 发表于 Dev

金茂

我正在使用RadioButtonGroup组件，它类似于单选输入，但带有按钮：

在此处输入图片说明

像这样简单地使用该组件将是很好的：

var SelectThing = React.createClass({
    render: function render() {
        // I would not like to add onClick handler to every button element
        // outside the RadioButtonGroup component
        return (
            <RadioButtonGroup onChange={this._onActiveChange}>
                <button>Thing 1</button>
                <button>Thing 2</button>
                <button>Thing 3</button>
            </RadioButtonGroup>
        )
    },

    _onActiveChange: function _onActiveChange(index) {
        console.log('You clicked button with index:', index);
    }
});

实际的问题：如何使用React最完美地实现这一目标？（我发现了另一个类似的问题，但并不能完全回答这个问题）。

我的第一个直觉是在组件内部添加和删除onClick处理程序，以从组件用户中删除样板代码。我想到的另一种选择是给例如<p>元素而不是按钮元素，并将它们放在将在RadioButtonGroup组件内部创建的按钮元素内。我不太喜欢后者，因为与传递按钮相比，它在语义上没有太大意义。

这是（显然不起作用）组件现在的样子：

// Radio input with buttons
// http://getbootstrap.com/javascript/#buttons-checkbox-radio
var RadioButtonGroup = React.createClass({
    getInitialState: function getInitialState() {
        return {
            active: this.props.active || 0
        };
    },

    componentWillMount: function componentWillMount() {
        var buttons = this.props.children;
        buttons[this.props.active].className += ' active';

        var self = this;
        buttons.forEach(function(button, index) {
            // How to dynamically set onclick handler for virtual dom
            // element created inside JSX?
            button.addEventListener('onClick', function(event) {
                self._onAnyButtonClick(index, event);
            }
        });
    },

    componentWillUnmount: function componentWillUnmount() {
        var buttons = this.props.children;

        buttons.forEach(function(button, index) {
            button.removeEventListener('onClick');
        });  
    },

    render: function render() {
        return (
            <div className="radio-button-group">
                {buttons}
            </div>
        )
    },

    _onAnyButtonClick: function _onAnyButtonClick(index, event) {
        this.setState({
            active: index
        });

        this.props.onChange(index);
    }
});

肖恩

您不想弄乱每个按钮上的单击处理程序，只需监听容器上的单击即可。然后根据单击哪个孩子来更新状态。

另外，使用React最好将所有DOM内容保留在render函数中。在这种情况下，定义元素的类名。

这是如何工作的：

var RadioButtonGroup = React.createClass({
    getInitialState: function getInitialState() {
        return {
            active: this.props.active || 0
        };
    },

    clickHandler: function clickHandler(e) {
        // Getting an array of DOM elements
        // Then finding which element was clicked
        var nodes = Array.prototype.slice.call( e.currentTarget.children );
        var index = nodes.indexOf( e.target );
        this.setState({ active: index });
    },

    render: function render() {
        var buttons = this.children.map(function(child, i) {
            if (i === this.state.active) child.props.className += ' active';
            return child;
        }, this);

        return (
            <div className="radio-button-group" onClick={ this.clickHandler }>
                { buttons }
            </div>
        )
    }
});