Почему переменная объявленная в ComponentWillMount стала Undefined?

Question

[Neuro]

У меня есть компонент такого типа, для краткости я убрал всё лишнее.

'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;

Данный компонент отображает кнопку при клике на которую в консоль должно вывестись значение переменной которую я объявил в ComponentWillMpont, но при клике, в консоль выводится undefined, почему?

Answer 1

[smilingcheater]

Потому что написав onClick={this.handleSubmit} вы отрываете функцию от контекста, и в этой функции у вас this - не ваш компонент
Попробуйте написать
onClick={this.handleSubmit.bind(this)}

Comments

[hzzzzl]

или
handleSubmit = () => { console.log(this.model) }

[sinneren]

Только биндить на атрибуте не есть хорошо. Либо в конструкторе, либо стрелочной как выше показали

Answer 2

[miliko mikoyan]

Вы должны использовать componentDidMount для настройки свойств экземпляра, так как контент в componentWillMount не будет находиться в области видимости экземпляра, так как компонент еще не смонтирован.

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;