Question

在这里反应newb。我有一个返回表单（表示组件）的纯函数。在这种形式中，我需要为受控制的文本字段处理onChange事件。 FWIU，我需要在我的onChange事件处理程序中使用this.setState（...）。但是由于这是一个纯函数，我无法访问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操作，将新值作为参数传递，并让操作在{x 1}}的redux存储中更新firstName的值/ p>

我建议您查看redux-form以减少一堆样板

Answer 2

无国籍功能组件不能拥有国家......因为它们是无国籍的。如果要让事件处理程序调用和设置状态，则需要通过React.createClass或使用ES6类创建组件类。

Answer 3

你实际上可以在看起来像功能组件的东西中使用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>
        )
    }
}

如果没有这个和类语法，你可以创建相同的效果：

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;
}

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

如果你想玩代码，这是一个codepen。

Answer 4

您可以使用react挂钩来实现所需的功能。

如果您编写一个函数组件，并且想在函数中添加一些内容，则以前必须将函数更改为类。但是现在您可以使用react挂钩在功能组件中创建状态。

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

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

4 个答案: