在组件 ES6 之间反应 setState

Posted 2023-02-22

【中文标题】在组件 ES6 之间反应 setState

【英文标题】：React setState between components ES6

【发布时间】：2016-10-14 04:33:06

【问题描述】：

我有一个非常简单的应用程序，我正在尝试从子组件更新父组件的状态，如下所示：

import React from '../../../../../../../dependencies/node_modules/react';
import ReactDOM from '../../../../../../../dependencies/node_modules/react-dom';

class CalendarMain extends React.Component 
    constructor() 
        super();
    

    handleClick() 
        this.props.handleStateClick("State Changed");
    

    render() 
        return ( 
            <div>
                <div className="calendar">
                    this.props.checkIn
                    <button onClick= this.handleClick.bind(this) >Click Me</button>
                </div>
            </div>
        )
    


class CalendarApp extends React.Component 

    constructor() 
        super();

        this.state =  
            checkIn: "Check-in",
            checkOut: "Check-out",
            dateSelected: false 
        ;
    

    handleStateClick( newState ) 
        this.setState(
            checkIn: newState
        );
    

    render() 

        return (
            <div>
                <CalendarMain 
                    checkIn =  this.state.checkIn 
                    handleStateClick =  this.handleStateClick.bind(this) 
                />
            </div>
        );
    

我收到的错误是this.setState is not a function，我不知道为什么。任何帮助将不胜感激！

【问题讨论】：

确保您不会在其他地方意外地改变this.setState。即：this.setState = foo: 'bar' ;

只要注意到 ../../..... 确保相对路径保留在您的项目中，否则移动项目（上传到远程、在 github/npm 上发布等）可能会破坏这些路径。

您可能需要重新考虑您的项目层次结构

您导入 React 的方式非常……令人失望。

它实际上适用于最新版本的 React：jsfiddle.net/1uh9e8wx

【参考方案1】：

使用() => lambda 提供词法范围并在方法handleStateClick() 中绑定正确的 this 值：

handleStateClick = () => 
  this.setState(
    checkIn: newState
  );

【讨论】：

您可能想解释一下，这个功能是实验性的，并且要包含哪些 Babel 转换以使其工作。

假设 OP 已经在使用 ES6 类和导入，人们会假设他们已经具备了所有的必备环境设置

似乎有点牵强...你知道这是一个提议而不是 ES6 的一部分吗？

我认为它是这里提到的 ES6 的一部分：ecma-international.org/ecma-262/6.0/…。也许我遗漏了一些东西，你可以为我指出一些资源来解释你所解释的内容。如果您指的是使用转译器，我认为 OP 已经设置好了

您建议使用的语法似乎是 github.com/jeffmo/es-class-fields-and-static-properties 。这目前是第 1 阶段的提案，因此必须添加相应的插件或预设才能启用此功能。

【参考方案2】：

this 在 ES6 样式语法中不是自动绑定的。

要么：

在构造函数中绑定如下：this.func = this.func.bind(this) 对相关函数使用箭头函数语法，如下所示：func = () => ;

更多：https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

【讨论】：

MDN documentation 关于箭头函数 (lambdas) 以获取更多参考

OP 似乎已经绑定了它：handleStateClick = this.handleStateClick.bind(this) .