Начал учиться Реагировать на забаву вчера, и я пытаюсь сделать простое веб-приложение с перечислением событий. Я счел, что официальная документация достаточно хороша и следит за их примерами.React multiple checkbox filters
Так что я убил их «Мышление в реале» - [http://facebook.github.io/react/docs/thinking-in-react.html] учебник для моих собственных нужд, но столкнулся с проблемой, я не могу окутать голову.
Я хотел бы иметь несколько фильтров флажков, которые обновляют таблицу данных, но я не могу понять, как управлять состоянием этих отдельных входов при управлении необходимыми реквизитами. Думаю, я понимаю, почему все флажки отмечены галочкой, когда выбрано только одно, потому что они берут свое состояние из родительского реквизита isChecked?
var EventFilter = React.createClass({
handleChange: function() {
if (this.refs.isCheckedInput.checked) {
this.props.onUserInput(
this.refs.isCheckedInput.value,
this.refs.isCheckedInput.checked
);
} else {
this.props.onUserInput('', false);
}
},
render: function() {
return (
<label>
<input
type="checkbox"
value={this.props.value}
checked={this.props.isChecked}
ref="isCheckedInput"
onChange={this.handleChange}
/>
{this.props.value}
</label>
);
}
});
var App = React.createClass({
getInitialState: function() {
return {
selectedFilter: '',
isChecked: false
};
},
handleUserInput: function(selectedFilter, isChecked) {
this.setState({
selectedFilter: selectedFilter,
isChecked: isChecked
});
},
render: function() {
return (
<div className="app">
<div>
<EventFilter
value="Bridgewater Hall"
selectedFilter={this.state.selectedFilter}
isChecked={this.state.isChecked}
onUserInput={this.handleUserInput}
/>
<EventFilter
value="The Deaf Institute"
selectedFilter={this.state.selectedFilter}
isChecked={this.state.isChecked}
onUserInput={this.handleUserInput}
/>
</div>
<EventTable
selectedFilter={this.state.selectedFilter}
listings={this.props.source}
/>
</div>
);
}
});
Вот ссылка на мой JSFiddle - http://jsfiddle.net/zhpk99ky/
Примечание о примере я представил, по какой-то причине галочка не будет выбирать и фильтровать данные, но они делают на моей локальной установке - несмотря на то, что данные фильтруются, оба флажка выбраны, хотя передается только значение выбранного.
Мне пришлось изменить ReactDOM.render на React.render, чтобы он тоже запущен, не знаете почему?
Любой совет будет оценен, как я сказал, что я стараюсь учиться на забаву, поэтому любые хорошие статьи или ресурсы будут замечательными, поскольку мне трудно думать в правильном мышлении Реагента. Благодарю.
Редактировать: gravityplanx said Я не задавал вопрос, поэтому, я думаю, я не сделал достаточно ясно!
Как я могу обрабатывать несколько состояний флажка, все еще проходя через отдельные входные значения, которые необходимо фильтровать данные?
Ваша скрипка вытаскивает старую версию реакции 0.12. Это до того времени, когда они расщепляются в пакет «реакция-дом». – ctrlplusb
Так в чем вопрос? – gravityplanx
Спасибо ctrlplusb. Обновлено с правильным вопросом gravityplanx – Bantros