ReactJS 从子组件修改父状态

Posted 2023-02-22

【中文标题】ReactJS 从子组件修改父状态

【英文标题】：ReactJS modify parent state from child component

【发布时间】：2015-04-15 23:30:38

【问题描述】：

我试图在单击时从状态数组中删除一个项目。目前我有一个 onclick 监听器，它调用一个传递给道具的函数。但是我收到一个警告：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);

【参考方案1】：

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 处理程序：

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

【讨论】：

谢谢，错误消失了，但仍然没有控制台记录任何内容：/

您还应该从 ToDo 组件调用onClick：jsfiddle.net/n8cph674

冷却它的工作，但是必须点击你的 li 是不是有点烦人，它在其父级上调用一个 prop 函数，然后再次在其父级上调用一个 prop 函数，然后调用最终完成您想要的功能。如果嵌套更深怎么办？它会变得疯狂。

记住 React 只是一个渲染库。对于复杂的情况，您需要某种形式的应用程序框架。没有“正确的方法”。选择最适合您的用例的框架/架构。不过，大多数设计都会从组件中提取数据。您的组件将获取初始数据，然后侦听更新。直接的父/子确实是唯一合理的例外，其中耦合是有意义的。例如，List 组件和 ListItem 组件具有逻辑关系。通常的建议是为您的应用程序架构使用 Flux 实现。

您的 ToDo 组件非常简单，可能不需要真正成为一个组件，除非您打算将它与其他组件一起重用。您可以在地图函数中轻松使用 而不是 。如果您打算在其他地方重用 ToDo 组件，那么这是行不通的。