如何在React中应用外部固定状态

Question

问题：我有一个称为" Insigupform"的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组件的状态？我觉得那是最合适的方法。

Answer 1

您将要通过Usersignup

向下传递道具

<SignupForm lockAccountType={Boolean} />

在Ingupform组件中，使用LockAccountType Prop设置状态。大多数人使用componentdidmount生命周期方法来做到这一点。给Indupform 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，它将警告您错误类型。
• 如果您不想直接从SignupForm类中更改lockAccountType，则可以完全删除构造函数，只需在该类中使用this.props.lockAccountType即可。在这种情况下，SignupForm将是一个无状态类。

希望这会有所帮助。