Реакция передачи значения через состояние при изменении дескриптора

Question

Я пытаюсь использовать два метода, handleChange и handleSubmit для страницы входа в реакцию.Я попытался установить два значения для имени пользователя и пароля в пределах состояния, обновлять значения в состоянии всякий раз, когда изменяются входные данные формы, а затем отправлять, используя значения, сохраненные в состоянии.Тем не менее, мои значения возвращаются неопределенными при выводе на консоль.(ps я знаю, мне все еще нужно зашифровать пароль для всех вас, гуру безопасности).

Я новичок, чтобы отреагировать, поэтому может быть проблема с моей логикой:

Login.js

export default class Login extends React.Component {

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

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({uname: event.target.uname, password: event.target.password});
}

handleSubmit(event) {
    alert('A username and password  was submitted: ' + this.state.uname + this.state.password);
    event.preventDefault();

    fetch('https://localhost:8080/login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            uname: this.state.uname,
            password: this.state.password,
        })
    });
}

render() {

    return (
        <div>
            <Header titleName={"Login"}>
                <div className="container">
                    <div className="card"/>
                    <div className="card">
                        <h1 className="title">Login</h1>
                        <form onSubmit={this.handleSubmit}>
                            <div className="input-container">
                                <input name="uname" type="text" value={this.state.uname} id="#uname" required="required"
                                        onChange={this.handleChange}/>
                                <label form="#unamelabel">Username</label>
                                <div className="bar"/>
                            </div>
                            <div className="input-container">
                                <input name="password" type="password" value={this.state.password} id="#pass" required="required"
                                       onChange={this.handleChange}/>
                                <label form="#passlabel">Password</label>
                                <div className="bar"/>
                            </div>
                            <div className="button-container">
                                <button type="submit" value="Submit"><span>Go</span></button>
                            </div>
                            <div className="footer"><a href="#">Forgot your password?</a></div>
                        </form>
                    </div>
                </div>
            </Header>
            <Footer/>
        </div>
    );
}
}

Answer 1

Проблема заключается в функции handleChange.В приведенном выше коде есть два различных объекта «события», связанных с двумя входами формы.Каждый из них имеет свой набор свойств.Например: «event.target.name» хранит атрибут «name», указанный тегом «input», а «event.target.value» хранит данные, введенные пользователем.Итак, измените реализацию handleChange на

(A) Verbose

handleChange(event) {
     if (event.target.name == "uname") {
              this.setState({
                uname: event.target.value
              });
            }
      if (event.target.name == "password") {
              this.setState({
                password: event.target.value
              });
            }
    }

, где вы можете сопоставить атрибут 'name' либо с uname, либо с паролем и соответственно установить состояние.

(B) Сжатый

  handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    });
}

Answer 2

Я думаю, что handleChange должен setState иметь event.tagert.name = event.target.value:

 handleChange(evt) {
    this.setState({
      [evt.target.name]: evt.target.value,
    });
  }

Answer 3

Если вы хотите получить значение входного значения внутри компонента реагирующего состояния, вы должны установить свойство ref этого входного параметра следующим образом:

<input name="username" ref={node => this.username = node} />

, затем вызов this.username вернет вам фактическое значениезначение ввода имени пользователя.

Вы не хотите устанавливать состояние в действии отправки, так как это заставляет ваш компонент пересчитывать каждый раз, когда буква нажимает ваше входное значение.

Больше в реагировать документ

Answer 4

Заменить смену рукоятки этим

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

Вам нужно установить значение входов в состояние, а не имя входов