昨天开始学习React的乐趣，我正在努力制作一个简单的活动列表网络应用程序。 我发现官方文档非常好，并且一直在关注他们的例子。
因此，我根据自己的需要对他们的“反思中的思考” - [ 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以使其完全运行，不知道为什么？
任何建议都会受到赞赏，就像我说我正在努力学习，所以任何好的文章或资源都会很好，因为我发现很难用正确的React思维思考。 谢谢。
编辑：gravityplanx提到我没有提出问题，所以我想我没有说清楚！
如何处理多个复选框状态，同时仍然传递过滤数据所需的各个输入值？
Started learning React for fun yesterday and I'm trying to make a simple event listing web app. I found the official documentation to be quite good and have been following their examples.
So I butchered their 'Thinking in React' - [http://facebook.github.io/react/docs/thinking-in-react.html] tutorial for my own needs but have come across a problem I can't wrap my head around.
I would like to have multiple checkbox filters that update a table of data but I cannot grasp how to control the state of these individual inputs whilst managing the necessary props. I think I understand why all checkboxes are ticked when only one is selected, because they are taking their state from the parent isChecked props?
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> ); } });Here is a link to my JSFiddle - http://jsfiddle.net/zhpk99ky/
A note about the example I provided, for some reason the checkboxes won't select and filter the data but they do on my local setup - the problem being even though the data is filtered both checkboxes are selected, even though only the value of the selected is passed.
I had to change ReactDOM.render to React.render to get it to run at all too, not sure why?
Any advice would be appreciated, like I said I'm trying to learn for fun so any good articles or resources would be great as I'm finding it hard to think in the proper React mindset. Thanks.
Edit: gravityplanx mentioned I didn't pose a question so I guess I didn't make one clear enough!
How can I handle multiple checkbox states whilst still passing over the individual input values that are need to filter the data?
最满意答案
Ditch是从您的App组件中选择的。 它并没有真正为你做任何有用的事情。
相反，让您的孩子组件看起来像这样;
<EventFilter value="Bridgewater Hall" selectedFilter={this.state.selectedFilter} isChecked={this.state.selectedFilter === "Bridgewater Hall"} onUserInput={this.handleUserInput} />如果要应用多个过滤器，请将selectedFilter更改为selectedFilters作为数组，并在更改处理程序中将字符串推送/弹出，并将过滤道具中的isChecked更改为.includes或.indexOf 。
Ditch isSelected from your App component. It's not really doing anything useful for you.
Instead, have your child components look like this;
<EventFilter value="Bridgewater Hall" selectedFilter={this.state.selectedFilter} isChecked={this.state.selectedFilter === "Bridgewater Hall"} onUserInput={this.handleUserInput} />If you want to apply multiple filters, change selectedFilter to selectedFilters as an array, and push/pop strings to it in your change handler, and changed isChecked in the Filter props to be a .includes or .indexOf.
更多推荐
发布评论