在纯 ES2015 函数中对“setState”做出反应答案

【问题标题】：React way to "setState" in a pure ES2015 function在纯 ES2015 函数中对“setState”做出反应
【发布时间】：2016-12-23 08:06:30
【问题描述】：

在这里反应 newb。我有一个返回表单（表示组件）的纯函数。在这种形式中，我需要为那些受控制的文本字段处理 onChange 事件。 FWIU，我需要 this.setState(...) 在我的 onChange 事件处理程序中。但是由于这是一个纯函数，我无法访问 this.setState()。有没有一种很好的方法可以在 ES2015 函数中设置这些 onChange 事件的状态？如果这有帮助，我也在使用 redux。示例代码：

import React, {PropTypes} from 'react'

const ApplicationForm = ({submitHandler, person}) => (
<form onSubmit={e => submitHandler(e)}>
 <div>
            <label htmlFor="firstName">First Name:</label>
            <input type="text" name="firstName" onChange={e => setState(e.target.value)} value={person.firstName || ''}/>
 </div>
...
</form>
)

【问题讨论】：

"无状态" == ...好吧，没有状态。操作是执行此操作的规范方法，例如，您可以将更改处理程序作为属性传递给 ApplicationForm 或导入函数（我倾向于前者以便更容易测试）。不过，您可能仍想使用propTypes。一般来说，我还建议只传递您实际需要的属性，而不是触及对象

标签： reactjs redux react-redux

【解决方案1】：

那是Stateless Function，没有要设置的状态

如果您使用的是 redux，您可能希望在 onChange 中触发一个 redux 操作，将新值作为参数传递，并让该操作更新 redux 存储中为 person.firstName 的 firstName 的值

我建议看看redux-form 以减少一堆样板文件

【讨论】：

感谢大家的cmets。我之前尝试过 redux-form (6.0rc4)，但在使用 saga 时遇到了问题，所以我放弃了它。所以我只是将那个无状态函数转换为一个组件类，以便使用 setState。我只有几个可编辑的字段，所以这不是什么大问题。

【解决方案2】：

您实际上可以在看起来像函数组件的东西中使用 setState，但它非常 hacky。我想这种方法只有真正无法忍受使用 this 关键字和类语法的人才会使用。不过，我认为这很有趣。

以下是您可以使用 this 和类语法以正常方式编写更改另一个元素的输入的方法：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {text: "Hello, world"};
    }

    handleChange = (event) => {
        this.setState({text: event.target.value});
    }

    render() {
        return (
            <div>
                <input value={this.state.text} onChange={this.handleChange} />
                <h1>{this.state.text}</h1>
            </div>
        )
    }
}

以下是在没有 this 和类语法的情况下如何创建相同效果的方法：

function App() {
    "use strict";

    const obj = {
        state: {text: "Hello, world"},
        __proto__: React.Component.prototype
    };

    obj.handleChange = function (event) {
        obj.setState({text: event.target.value});
    };

    obj.render = function () {
        return (
            <div>
                <input value={obj.state.text} onChange={obj.handleChange} />
                <h1>{obj.state.text}</h1>
            </div>
        );
    };

    return obj;
}

诀窍是通过将对象 App 返回的 dunder proto 属性设置为 React.Component 的原型，使 App 函数继承自 React.Component，以便它可以使用 setState。

如果您想玩弄代码，这里是codepen。

【讨论】：

【解决方案3】：

无状态功能组件不能有状态...因为它们是无状态的。如果您想调用事件处理程序并设置状态，则需要通过 React.createClass 或使用 ES6 类创建一个组件类。

【讨论】：

【解决方案4】：

你可以使用 react hooks 来实现你想要的。

如果你编写一个函数组件并且你想为你的函数添加一些状态，之前你必须将你的函数变成一个类。但是现在你可以使用反应钩子在你的功能组件中创建你的状态。

EX:- 我们编写具有如下状态的类组件

class Foo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 20
    };
  }

现在我们可以在功能组件中实现上述代码如下

import React, { useState } from 'react';

function Foo() {
  const [age, setAge] = useState(20);

有关更多详细信息，请参阅此文档 - https://reactjs.org/docs/hooks-state.html

【讨论】：

【解决方案5】：

使用 React Hooks，我们现在将状态可用性扩展到功能组件。要使用它，我们可以从 React 导入 {useState} 并将默认值传递给它的参数。

    import React, {PropTypes, useState} from 'react'
    
    const ApplicationForm = ({submitHandler, person}) => (
        
    const [name, updateName]= useState(person.firstName);


    <form onSubmit={e => submitHandler(e)}>
         <div>`enter code here`
                    <label htmlFor="firstName">First Name:</label>
                    <input type="text" name="firstName" onChange={e => updateName(e.target.value)} value={name || ''}/>
         </div>
        ...
        </form>
        )

更多细节可以在useState的文档中找到。

【讨论】：