Javascript 如何访问组件中的状态';Reactjs中的默认道具

Javascript 如何访问组件中的状态';Reactjs中的默认道具,javascript,reactjs,ecmascript-6,react-props,Javascript,Reactjs,Ecmascript 6,React Props,我需要获取一个类的defaultProps访问的组件的状态,下面是我的代码: class Headcomponent extends React.Component { constructor(props) { super(props); this.state = { email: '', password: '', formErrors: { em

我需要获取一个类的
defaultProps
访问的组件的状态,下面是我的代码:

class Headcomponent extends React.Component {

    constructor(props) {

        super(props);
        this.state = {
            email: '',
            password: '',
            formErrors: {
                email: '',
                password: ''
            },
            emailValid: false,
            passwordValid: false,
            formValid: false,
            items: [],

        }
    }


    this.setState({
        formErrors: fieldValidationErrors,
        emailValid: emailValid,
        passwordValid: passwordValid
    }, this.validateForm);
}

validateForm() {
    this.setState({
        formValid: this.state.emailValid &&
            this.state.passwordValid
    });
}


render() {
    return ( <
        Form fields = {
            this.props.form
        }
        buttonText = "Submit" / >
    );
}
}    

Headcomponent.propTypes = {
    form: PropTypes.array,
};

Headcomponent.defaultProps = {
    form: [{
            label: 'label1',
            placeholder: 'Input 1',
            value: {
                this.state.password
            } //this throws an error
        },
        {
            label: 'label2',
            placeholder: 'Placeholder for Input 2',
        },
    ],
};

export default Headcomponent;
类头组件扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
电子邮件:“”,
密码:“”,
表单错误:{
电子邮件:“”,
密码:“”
},
emailValid:false,
passwordValid:false,
formValid:false,
项目:[],
}
}
这是我的国家({
formErrors:fieldValidationErrors,
emailValid:emailValid,
passwordValid:passwordValid
},this.validateForm);
}
validateForm(){
这是我的国家({
formValid:this.state.emailValid&&
this.state.passwordValid
});
}
render(){
报税表(<
表单字段={
这是道具
}
buttonText=“提交”/>
);
}
}    
Headcomponent.propTypes={
形式:PropTypes.array,
};
Headcomponent.defaultProps={
表格:[{
标签:“label1”,
占位符:“输入1”,
价值:{
此为.state.password
}//这会抛出一个错误
},
{
标签:“label2”,
占位符:“输入2的占位符”,
},
],
};
导出默认Headcomponent;

{this.state.password}
抛出一个错误,因为它在类之外。如何获取
密码的状态
并将其传递到
Headcomponent.defaultProps
中?

恐怕您不能。在启动组件之前调用getDefaultProps。您不能像那样在组件之外使用状态。

我不完全理解您要做什么。请解释一下

如果您试图为密码字段之类的内容设置默认属性,则可以将其设置为字符串值。如果希望默认密码属性为“password123”,则将其设置为“password123”

在我试图理解这一点时,不清楚您是如何在react组件中设置this.state.password的。在构造函数中有一个浮点setState调用,但它没有列出密码


听起来您正试图将默认道具设置为将来某个时候某人最终将在表单中键入的值。您不能将默认值设置为某人将来决定的值。这将需要时间旅行。

那么,你有什么建议作为解决方案,如何在defaultProps中获得密码值?我不认为你明白我的意思,你在defaultProps中没有密码值,你永远不会有,如上所述,你可以将其设置为字符串(默认密码或其他)但基本上,defaultProps是在呈现所有其他内容之前提供的默认值,因此react呈现密码输入的那一刻将获取您在其中输入的任何内容的值,这不能来自它的状态,因为此时状态甚至还没有启动。另一种方法是像上面提到的那样将其传递给道具,但这仍然不是作为defaultProp,而是作为道具。好的,现在我知道我不能使用defaultProps来获取密码的状态,我在这里所做的是尝试将我的密码值实时传递给这个类之外的另一个组件,如果密码短于5个字符,那么它将显示一条错误消息。我用一个单独的类来做这三件事,它是有效的,但现在我正尝试使用原子设计,因为我正在写的组件正在迅速变大,所以我正在尝试将它们分开,关于如何做到这一点,有什么想法吗?如果我的答案回答了你的问题,请把它标记为正确。为了澄清,您是否想了解如何在组件外部传递状态,或者如果字符串少于5个字符,如何显示错误消息?为您需要帮助的问题打开一个新的堆栈问题。确切地说,我想将组件的状态传递给另一个类,我该如何做,我放置的代码没有太大变化。是的,但是您打开一个新问题,以便其他有相同问题的人将来也可以找到它。如果您没有使用redux或mobx,那么基本思想是将状态提升到最近的共同祖先。在回答一个单独的问题时比在评论中更容易解释。好的,在这里