如何在 React 中应用外部 SetState答案

【问题标题】：How to apply an external SetState in React如何在 React 中应用外部 SetState
【发布时间】：2017-07-16 19:51:24
【问题描述】：

问题：我有一个名为“SignupForm”的 React 组件，我正在尝试将其扩展如下：

export default class UserSignup extends Component  {
    render() {
        const obForm = <SignupForm/>;
        obForm.setState({lockAccountType: true});
        return obForm;
    }
}

但这会抛出一个错误，即常量 obForm 缺少 setState 方法，Uncaught (in promise) TypeError: obForm.setState is not a function

那我应该如何设置这个 React 组件的状态呢？我觉得这是最合适的方法。

【问题讨论】：

标签： javascript reactjs react-native components

【解决方案1】：

您的父组件将包含状态，子组件将获得与道具一样的状态属性。父组件将具有状态更改处理程序，该处理程序也将传递给子组件。父组件中的状态将被更改，因此 setState 将在每个位置重新渲染新状态。

var Header = React.createClass({
    getInitialState: function(){
        return { name: 'Mike' }
    },
    render: function(){
        return(
            <div>
                <h1>Welcome {this.state.name}</h1>
                <input type="text" value={this.state.name} onChange={this.handleStateChange}  />

                <hr/>

                <Footer fName={this.state.name} changeProps={this.handleChangeProps}/>
            </div>
        )
    },
    handleStateChange: function(event){
        console.log(event.target.value);
        this.setState({name: event.target.value});
    },
    handleChangeProps: function(name){
        console.log(name);
        this.setState({name: name})
    }
});


var Footer = React.createClass({
    render: function(){
        return(
            <div>
                <h1>Welcome {this.props.fName}</h1>
                <input type="text" value={this.props.fName} onChange={this.handlePropChange}/>
            </div>
        )
    },
    handlePropChange: function(event){
        console.log(event.target.value);
        this.props.changeProps(event.target.value);
    }
})



var pageElement = React.createElement(Header, {});

React.render(pageElement, document.getElementById('my-app'));

【讨论】：

【解决方案2】：

您将要从 UserSignup 向下传递一个 prop 到 SignupForm

<SignupForm lockAccountType={Boolean} />

在 SignupForm 组件中，使用 lockAccountType 属性设置状态。大多数人使用 componentDidMount 生命周期方法来做到这一点。给 SignupForm 一个 lockAccountType={Boolean} 的初始状态，然后用你的 prop 在 componentDidMount 上改变它。

【讨论】：

【解决方案3】：

只是想回应一些其他答案，同时为您提供一些更具体的上下文。

UserSignup.js

import React, { Component } from 'react';
import SignupForm from './SignupForm';

export default class UserSignup extends Component  {
    render() {
        return (
            <SignupForm lockAccountType={true}/>
        );
    }
}

SignupForm.js

import React, { Component, PropTypes } from 'react';
import { Text } from 'react-native';

export default class SignupForm extends Component  {
    constructor(props) {
        super(props);
        this.state = {lockAccountType: this.props.lockAccountType};
    }

    render() {
        return (
            <Text>
                {'lockAccountType: ' + this.state.lockAccountType}
            </Text>
        );
    }
}

SignupForm.propTypes = {
    lockAccountType: React.PropTypes.bool.isRequired
};

（显然，请随意修改SignupForm.render()。这只是一个概念验证。）

正如其他人提到的，您希望将 lockAccountType 值作为道具传递给注册表单。

在我的示例中，该值是静态的 (true)。如果你想改变这个值，你可以把它作为UserSignup中的一个状态变量：

UserSignup.js（修改）

import React, { Component } from 'react';
import SignupForm from './SignupForm';

export default class UserSignup extends Component  {
    constructor() {
        super();
        this.state = {lockAccountType: true};
    }

    render() {
        return (
            <SignupForm lockAccountType={this.state.lockAccountType}/>
        );
    }
}

您可能希望添加可以调整此状态值的功能。通常，对您的状态的任何更改都会导致该组件的重新渲染。在这种情况下，更改将传播到 SignupForm 元素，您应该会获得所需的结果。

最后的几点说明

我建议在你的类中指定 propTypes。在您开发时，这会在您为道具分配值时警告您任何问题。在此示例中，如果未指定 lockAccountType 或类型错误，我们将看到警告。如果您删除 .isRequired，它只会警告您错误类型。
如果您不想直接从SignupForm 类中更改lockAccountType，您可以完全删除构造函数，只在该类中使用this.props.lockAccountType。在那种情况下，SignupForm 将是一个无状态类。

希望这会有所帮助。

【讨论】：