Question

我有一个带有表单的React组件，我需要做的是捕获用户名，然后使用sessionstorage保存它。

这是我目前正在尝试但却没有保存它。

以下是代码：

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      password: '',
      redirect: false,
    };

    this.onUsernameChange = this.onUsernameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
  }

  onUsernameChange(event) {
    this.setState({ username: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit() { 
    event.preventDefault();
    sessionStorage.setItem('username', this.username);

  }

  render() {

    return (
        <div>
          <form className="form-signin" onSubmit={this.handleSubmit}>
            <input type="text" value={this.username} onChange={this.onUsernameChange} />
            <input type="password" value={this.password} onChange={this.onPasswordChange} />
            <input type="submit" value="Submit" />
          </form>
        </div>
    );
  }
}

export default Login;

我怎样才能让它发挥作用？

Answer 1

我认为您只需要将username添加到州，然后将event传递给handleSubmit

 class Login extends Component {
      constructor(props) {
        super(props);
        this.state = {
          password: '',
          redirect: false,
          username: ''
        };

    this.onUsernameChange = this.onUsernameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
  }

  onUsernameChange(event) {
    this.setState({ username: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit(event) { 
    event.preventDefault();
    sessionStorage.setItem('username', this.state.username);

  }

  render() {

    return (
        <div>
          <form className="form-signin" onSubmit={this.handleSubmit}>
            <input type="text" value={this.username} onChange={this.onUsernameChange} />
            <input type="password" value={this.password} onChange={this.onPasswordChange} />
            <input type="submit" value="Submit" />
          </form>
        </div>
    );
  }
}

export default Login;

Answer 2

handleSubmit(event) { 
    event.preventDefault();
    //  sessionStorage.setItem('username', this.username); your code
    sessionStorage.setItem('username', this.state.username);
  }

您使用this.username获得了用户名。但是这里没有用户名。所以你从组件的状态获得用户名。

你的方法没有参数。如果你想要事件你把事件放在参数中。

javascript React Form onsubmit保存提交的用户名

2 个答案: