我试图单击时从状态数组中删除一个项目。目前,我有一个onclick侦听器,它调用传递给props的函数。但是我得到一个警告:bind():React组件方法只能绑定到组件实例。请参阅应用程序…,它不会删除该项目。
感谢您提供有关此问题的帮助!这几乎使我的进展停了下来。
(function (React) { var data = [ 'Go to work', 'Play Albion Online', 'Keep learning React' ] var App = React.createClass({ getInitialState: function () { return {data: []} }, componentWillMount: function () { this.state.data = data; }, removeItem: function (i) { console.log(i); }, render: function () { return ( <ToDoList onRemoveItem={this.removeItem} tasks={this.state.data} /> ) } }); var ToDoList = React.createClass({ render: function () { var scope = this; var tasks = this.props.tasks.map(function (task, i) { return <ToDo onClick={scope.props.onRemoveItem.bind(this, i)} key={task} task={task} /> }); return ( <ul> {tasks} </ul> ) } }); var ToDo = React.createClass({ render: function () { return ( <li>{this.props.task}</li> ) } }); React.render(<App />, document.getElementById('example')); })(React);
React实际上将方法自动绑定到当前组件:
http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by- default.html
在TodoList组件中,而不是:
scope.props.onRemoveItem.bind(this, i)
尝试:
scope.props.onRemoveItem.bind(null, i)
通过提供null而不是this您,您将允许React自己做自己的事情。您还需要实际使用onClick处理程序:
null
this
<li onClick={this.props.onClick}>{this.props.task}</li>