在纯 ES2015 函数中对 "setState" 的反应方式

Question

React 新手在这里。我有一个纯函数 returns 一个表单（表示组件）。在这种形式下，我需要为那些受控的文本字段处理 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>
)

Answer 1

那是一个Stateless Function，没有状态可以设置

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

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

Answer 2

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

创建一个组件 class

Answer 3

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

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

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 和 class 语法的情况下创建相同效果的方法：

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 returns 的 dunder proto 属性设置为 React.Component 的原型，使 App 函数继承自 React.Component，这样它可以使用 setState。

如果您想尝试一下代码，请点击此处 codepen。

Answer 4

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

如果您编写了一个功能组件，并且想为您的功能添加一些状态，之前您必须将您的功能更改为 class。但现在您可以使用 React Hooks 在您的功能组件中创建您的状态。

EX:- 我们编写 class 个状态如下的组件

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

Answer 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 的文档。

在纯 ES2015 函数中对 "setState" 的反应方式

React way to "setState" in a pure ES2015 function

reactjs

redux

react-redux