javascript React表單onsubmit保存提交的用戶名

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的狀態，然後再傳遞到eventhandleSubmit

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用戶名。但是這裏沒有用戶名。 所以你從組件狀態獲取用戶名。

而你的方法沒有參數。如果你想要事件你把事件放在參數中。