Question

我正在尝试使用Material-ui创建一个新的Login组件。我有两个状态变量'username'和'password'。当我填写文本字段并提交它时，我的submitForm函数中的状态值不可用。

我的代码是：

class Login extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }


submitForm(e) {
  e.preventDefault();
   console.log('test');
   console.log(this.state.username.trim());
   console.log(this.state.password.trim());

  };

render() {

    return (
     <form className="commentForm">
    <TextField
      value={this.state.username}
      onChange={e => this.setState({ username: e.target.value })}
      hintText = "username" style={textfieldStyles.margin}

    />
    <TextField
      value={this.state.password}
      onChange={e => this.setState({ password: e.target.value })}
      hintText = "password" type="password"

    />
         <IconButton iconStyle={{iconHoverColor: '#55ff55'}}
     tooltip="Sing In" key='signin-button' 
     // onTouchTap={this.handleTouchTap}
     onClick={this.submitForm}
     >
    <ArrowIcon color={Colors.cyan500} style={{marginTop: 30}} hoverColor={hoverColor} />
    </IconButton>
  </form>
    );
  }
}

export default Login;

控制台输出console.log（'test'）;正在努力但是

console.log(this.state.username.trim());
console.log(this.state.password.trim());

没有提供任何输出。

我是否遗漏了设置状态变量的内容？或者我需要包含其他东西以使其有效？

Answer 1

由于您使用的是ES6类语法，因此您应该为类方法绑定this，在本例中为submitForm方法。

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

constructor(props) {
  super(props);
  this.submitForm = this.submitForm.bind(this);
  ...
}

否则您无法访问this.state内的submitForm。

Material-ui设置表单组件中的状态值不起作用

1 个答案: