Question

问题：我有一个名为＆＃34; SignupForm＆＃34;的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

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

Answer 1

您可能希望将支持从UserSignup传递给SignupForm

<SignupForm lockAccountType={Boolean} />

在SignupForm组件中，使用lockAccountType prop设置状态。大多数人使用componentDidMount生命周期方法执行此操作。给SignupForm一个初始状态lockAccountType = {Boolean}，然后用你的道具在componentDidMount上更改它。

Answer 2

您的父组件将包含状态和子组件将获取状态属性，如道具。父组件将具有状态更改处理程序，该处理程序也将传递给子组件。状态将在父组件中更改，以便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'));

Answer 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，它只会警告您错误的类型。
如果您不想直接在lockAccountType类中更改SignupForm，则可以完全删除构造函数，只需在该类中使用this.props.lockAccountType即可。在那种情况下，SignupForm将是无国籍的类。

希望这有帮助。

如何在React中应用外部SetState

3 个答案:

UserSignup.js

SignupForm.js

UserSignup.js（已修改）