State ReactJS从子组件修改父状态

单击时，我试图从状态数组中删除一个项。目前，我有一个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);

（功能（反应）{
风险值数据=[
“去工作”，
“在线游戏”，
“不断学习和反应”
]
var App=React.createClass({
getInitialState:函数（）{
返回{data:[]}
},
componentWillMount:函数（）{
this.state.data=数据；
},
removeItem:功能（i）{
控制台日志（i）；
},
渲染：函数（）{
返回(
)
}
});
var ToDoList=React.createClass({
渲染：函数（）{
var范围=此；
var tasks=this.props.tasks.map（函数（任务，i）{
返回
});
返回(

{tasks}

)
}
});
var ToDo=React.createClass({
渲染：函数（）{
返回(
{this.props.task}
)
}
});
React.render（，document.getElementById（'example'））；
})（反应）；

React实际自动将方法绑定到当前组件：

在TodoList组件中，而不是：

scope.props.onRemoveItem.bind(this, i)

尝试：

通过提供

null

而不是

this

，您将允许React做自己的事情。您还需要实际使用onClick处理程序：

<li onClick={this.props.onClick}>{this.props.task}</li>

{this.props.task}

谢谢，伙计，错误已经消失了，但它仍然没有记录任何东西：/n您还应该从ToDo组件调用

onClick

：冷却它的工作，但是必须单击您的li，它调用其父级上的prop函数，然后再次调用其父级上的prop函数，这不是有点烦人吗，然后调用一个函数，该函数最终执行您想要的操作。如果筑巢更深呢？记住React只是一个渲染库。对于复杂的情况，您需要某种形式的应用程序框架。没有“正确的道路”。选择最适合您的用例的框架/架构。不过，大多数设计都会从组件中提取数据。组件将获取初始数据，然后侦听更新。直接父/子实际上是唯一理智的例外，耦合是有意义的。例如，列表组件和ListItem组件具有逻辑关系。通常的建议是在应用程序架构中使用Flux实现。ToDo组件非常简单，可能不需要实际成为组件，除非您计划将其与其他组件一起重用。您可以在map函数中轻松地使用

，而不是使用。如果您计划在其他地方重用ToDo组件，那么这是行不通的。

<li onClick={this.props.onClick}>{this.props.task}</li>