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 中 class 绑定必须手动完成。

需要将 .bind(this) 添加到 handleChange

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} />
        )
    }
}

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

this.setState is not a function for textfield

reactjs

material-ui