如何在 Reactjs 中访问组件的 defaultProps 中的状态

Question

我需要获取要被 class 的 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;

{this.state.password} 抛出错误，因为它在 class 之外。如何获取 password 的状态并将其传递到 Headcomponent.defaultProps 中？

Answer 1

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

Answer 2

我不完全明白你想做什么。请解释。

如果您尝试为密码字段之类的内容设置默认属性，那么您可以将其设置为字符串值。如果您希望默认密码属性为 'password123'，则将其设置为 'password123'.

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

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

如何在 Reactjs 中访问组件的 defaultProps 中的状态

How do I access state in a component's defaultProps in Reactjs

javascript

ecmascript-6

reactjs

react-props