我有一个这种类型的组件。为简单起见,我删除了所有不必要的代码。
这个组件在点击时显示一个按钮,我在ComponentWillMount
声明的变量的值应该显示在控制台中,但是点击时,控制台显示undefined,为什么?
'use strict';
class LoginFormComponent extends React.Component {
handleSubmit() {
console.log(this.model); //undefined
}
componentWillMount() {
this.model = 123;
}
render() {
console.log(this.model); //123
var styles = this.props.styles;
return (
<CM.MUI.FlatButton
style={styles.buttonStyle}
onClick={this.handleSubmit}
label={CM.gettext('Login')}/>
);
}
};
module.exports = LoginFormComponent;
最佳答案
您应该使用 componentDidMount
来设置实例属性,因为 componentWillMount
中的内容不会在实例范围内,因为组件尚未安装。
此外,使用 =>
粗箭头函数来访问组件的 this
实例。
更新代码:
class LoginFormComponent extends React.Component {
handleSubmit = () => {
console.log(this.model); // 123
}
componentDidMount() {
this.model = 123;
}
render() {
console.log(this.model); //123
var styles = this.props.styles;
return (
<CM.MUI.FlatButton
style={styles.buttonStyle}
onClick={this.handleSubmit}
label={CM.gettext("Login")}
/>
);
}
}
export default LoginFormComponent;
控制台
演示:agitated-solomon-3rrow - CodeSandbox
更多信息
如本演示中所述:summer-violet-g4pyd - CodeSandbox ,看起来 React 的工作方式如下:
- 构造器
- componentWillMount
- 渲染
- componentDidMount
因此在执行 render()
之后,将执行 componentDidMount
并且在任何状态更改后都没有变化。
如果你想要一些东西在那里,请把它们放在 constructor()
中。
此外,componentWillMount
已弃用,您不应在下一个版本中使用它。
关于javascript - 为什么ComponentWillMount中声明的变量是Undefined?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56937383/