Я работаю с компонентом 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);
}
});