Обработка форм на React.js — серия заметок для себя

Поигравшись с маршрутизатором в прошлой серии, сегодня я поиграюсь с состоянием реакции и пропсами. Я расскажу о том, как настроить процесс входа пользователя в React, который будет включать состояния и реквизиты. Эта серия также затронет, как я могу обрабатывать взаимодействие с формами и их отправку.

Шаг 1

В предыдущей серии я создал страницу входа, которая содержит только текст заголовка, поэтому теперь я заменю этот текст простой формой.

#client/components/Signin.js
import SigninForm from './signinform/SigninForm';
class SignIn extends Component {
constructor(props) {
  super(props);
  
  this.state = {
   username: " "
  }
this.handleUserInput = this.handleUserInput.bind(this);
 }
handleUserInput(obj) {
  this.setState(obj);
 }
 render() {
  return(
   <div id="signin-container">
<SigninForm inputUserName={this.state.username} onUserInput={this.handleUserInput}/>
    
   </div>
   
  );
 }
#client/components/signinform/SigninForm.js
import React, {Component} from 'react';
class SigninForm extends Component {
constructor(props) {
  super(props);
this.handleOnChange = this.handleOnChange.bind(this);
 }
handleOnChange(e) {
  let name = e.target.name;
  let obj = {};
  obj[name] = e.target.value;
return this.props.onUserInput(obj);
 }
render() {
  return(
   <form>
   <div className="grid-x">
       <div className="small-12 cell">
       <label>
        Your Username
        <input 
         type="text" 
         name="username"
         value={this.props.inputUserName}
         onChange = {this.handleOnChange} />
       </label>
       </div>
       <div className="small-12 cell">
       
        <input type="submit" className="button"/>
       
       </div>
       
    </div>
    </form>
  );
 }
}
export default SigninForm;

Чтобы форма работала правильно, она должна иметь функцию для обработки всего поведения. В этом случае каждый раз, когда происходит изменение входного текста, будет запускаться функция handleOnChange. Затем эта функция вернет объект, содержащий последнее изменение ввода, для реквизита, называемого onUserInput, который позже вызовет функцию с именем handleUserInput в родительском компоненте.

Наконец, эта функция будет обновлять состояние, которое определено относительно входных данных формы.

Шаг 2

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

#client/components/Signin.js
import SigninForm from './signinform/SigninForm';
class SignIn extends Component {
constructor(props) {
  super(props);
  
  this.state = {
   username: " "
  }
this.handleUserInput = this.handleUserInput.bind(this);
this.handleUserSubmit = this.handleUserSubmit.bind(this);
 }
handleUserInput(obj) {
  this.setState(obj);
 }
handleUserSubmit() {
  
  console.log(this.state);
 }
 render() {
  return(
   <div id="signin-container">
<SigninForm inputUserName={this.state.username} onUserInput={this.handleUserInput} onSubmit={this.handleUserSubmit}/>
    
   </div>
   
  );
 }
#client/components/signinform/SigninForm.js
import React, {Component} from 'react';
class SigninForm extends Component {
constructor(props) {
  super(props);
this.handleOnChange = this.handleOnChange.bind(this);
this.handleOnSubmit = this.handleOnSubmit.bind(this);
 }
handleOnChange(e) {
  let name = e.target.name;
  let obj = {};
  obj[name] = e.target.value;
return this.props.onUserInput(obj);
 }
handleOnSubmit(e) {
  e.preventDefault();
  this.props.onSubmit();
 }
render() {
  return(
   <form onSubmit = {this.handleOnSubmit}>
   <div className="grid-x">
       <div className="small-12 cell">
       <label>
        Your Username
        <input 
         type="text" 
         name="username"
         value={this.props.inputUserName}
         onChange = {this.handleOnChange} />
       </label>
       </div>
       <div className="small-12 cell">
       
        <input type="submit" className="button"/>
       
       </div>
       
    </div>
    </form>
);
 }
}
export default SigninForm;

Я создал функцию с именем handleOnSubmit, которая является ссылкой на прослушиватель событий onChange. Эта функция будет вызывать другую функцию из родительского компонента через его реквизит, и, следовательно, функция будет регистрировать текущее состояние в консоли.

Шаг 3

Я заполню форму другими необходимыми данными. Сначала я добавлю больше состояний, чтобы я мог хранить больше данных из формы. Затем мне нужно изменить способ отправки текущего состояния дочернему компоненту и, наконец, добавить дополнительные html-формы в компонент SigninForm.

#client/components/Signin.js
import React,  {Component} from 'react';
import SigninForm from './signinform/SigninForm';
class SignIn extends Component {
 constructor(props) {
  super(props);
  
  this.state = {
   username: "",
   email: "",
   password: "",
   passwordConfirmation: ""
  }
this.handleUserInput = this.handleUserInput.bind(this);
  this.handleUserSubmit = this.handleUserSubmit.bind(this);
 }
handleUserInput(obj) {
  this.setState(obj);
 }
handleUserSubmit() {
console.log(this.state);
 }
render() {
  return(
   <div id="signin-container">
<SigninForm userData={this.state} onUserInput={this.handleUserInput} onSubmit={this.handleUserSubmit}/>
    
   </div>
   
  );
 }
}
export default SignIn;
#client/components/signinform/SigninForm.js
import React, {Component} from 'react';
class SigninForm extends Component {
 constructor(props) {
  super(props);
this.handleOnChange = this.handleOnChange.bind(this);
  this.handleOnSubmit = this.handleOnSubmit.bind(this);
 }
handleOnChange(e) {
  let name = e.target.name;
  let obj = {};
  obj[name] = e.target.value;
return this.props.onUserInput(obj);
 }
handleOnSubmit(e) {
  e.preventDefault();
  this.props.onSubmit();
 }
render() {
  return(
   <form onSubmit = {this.handleOnSubmit}>
   <div className="grid-x">
       <div className="small-12 cell">
        <label>
         Your Username
         <input 
          type="text" 
          name="username"
          value={this.props.userData.username}
          onChange = {this.handleOnChange} />
        </label>
       </div>
       <div className="small-12 cell">
        <label>
         Your email
         <input 
          type="email" 
          name="email"
          value={this.props.userData.email}
          onChange = {this.handleOnChange} />
        </label>
       </div>
       <div className="small-12 cell">
        <label>
         Your password
         <input 
          type="password" 
          name="password"
          value={this.props.userData.password}
          onChange = {this.handleOnChange} />
        </label>
       </div>
<div className="small-12 cell">
        <label>
         Your password confirmation
         <input 
          type="password" 
          name="passwordConfirmation"
          value={this.props.userData.passwordConfirmation}
          onChange = {this.handleOnChange} />
        </label>
       </div>
<div className="small-12 cell">
       
        <input type="submit" className="button"/>
       
       </div>
       
   </div>
   </form>
  );
 }
}
export default SigninForm;

Я оставлю данные такими, какие они есть, и обработаю их позже в другом эпизоде.

Ура, увидимся в следующем посте.

Гитхаб-ресурс

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