this.setState 不是文本字段的函数

Question

在用户在文本字段中输入时尝试对文本字段进行验证。我想即时更改errorText 属性的状态。

我在尝试设置状态时收到错误 Uncaught TypeError: this.setState is not a function。相关代码如下。

export default class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            username: null,
            errorCopy: null
        };
    }
    handleChange(e) {
        this.setState({errorCopy: 'Generic error copy'});
    }
    render() {
        return(
            <TextField
                hintText="Username"
                value={this.state.username}
                onChange={this.handleChange}
                errorText={this.state.errorCopy} />
        )
    }
}

Answer 1

哎呀，在 ES6 中类绑定必须手动完成。

需要在handleChange中添加.bind(this)

export default class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            username: null,
            errorCopy: null
        };
    }
    handleChange(e) {
        this.setState({errorCopy: 'Generic error copy'});
    }
    render() {
        return(
            <TextField
                hintText="Username"
                value={this.state.username}
                onChange={this.handleChange.bind(this)}
                errorText={this.state.errorCopy} />
        )
    }
}