javascript - vacios - Formulario de registro múltiple con redux y reaccionar

validar formulario jquery

Question

He estado tratando de desarrollar un formulario de tablero similar al formulario de listado de Airbnb para comprender más a fondo acerca de la reacción redux pero estoy atrapado en el medio de mi proyecto. Tengo un formulario múltiple en el que cuando el usuario hace clic en el botón Continuar, el usuario obtendrá otro formulario para completar, y así sucesivamente, y si el usuario hace clic en el botón Atrás, el usuario obtendrá un paso atrás con los valores previamente llenados. No podía decidir qué debería hacer para esto. ¿Tengo que crear un objeto en acción como listingName? resumen, nombre, correo electrónico, etc. como valor vacío y actualícelo con reductor usando Object.assign () o qué. Hasta ahora solo podía desarrollar como cuando el usuario hace clic en la pestaña personal, se muestra un formulario relacionado con la información personal y cuando el usuario hace clic en la pestaña básica, se muestra un formulario relacionado con la información básica. Quiero que todos los datos de formulario se envíen al servidor al último envío. Qué debería hacer ahora ? ¿Utilizo acciones de incremento y decremento para los botones Continuar y Atrás y uso la acción Enviar en el último botón de formulario? ¿Podría darme una idea?

Aquí está mi código

actions / index.js

export function selectForm(form){
  return{
    type: ''FORM_SELECTED'',
    payload: form
  };

}

reducors / reducer_active_form.js

export default function(state=null, action){
  let newState = Object.assign({},state);
  switch(action.type){
    case ''FORM_SELECTED'':
      return action.payload;
  }
  return state;
}

reducors / reducer_form_option.js

export default function(){
  return[
    { option: ''Personal Information'', id:1},
    { option: ''Basic Information'', id:2 },
    { option: ''Description'', id:3},
    { option: ''Location'', id:4},
    { option: ''Amenities'', id:5},
    { option: ''Gallery'', id:6}
  ]
}

contenedores / detalles de formulario

class FormDetail extends Component{
  renderPersonalInfo(){
    return(
      <div className="personalInfo">
        <div className="col-md-4">
          <label htmlFor=''name''>Owner Name</label>
          <input ref="name" type="textbox" className="form-control" id="name" placeholder="Owner name" />
        </div>

        <div className="col-md-4">
          <label htmlFor="email">Email</label>
          <input ref="email" type="email" className="form-control" id="email" placeholder="email" />
        </div>

        <div className="col-md-4">
          <label htmlFor="phoneNumber">Phone Number</label>
          <input ref="phone" type="textbox" className="form-control" id="phoneNumber" placeholder="phone number" />
        </div>

        <div className="buttons">
          <button className="btn btn-primary">Continue</button>
        </div>

      </div>
      );
  }

  renderBasicInfo(){
    return(
       <div>
              <h3>Help Rent seekers find the right fit</h3>
              <p className="subtitle">People searching on Rental Space can filter by listing basics to find a space that matches their needs.</p>
              <hr/>
              <div className="col-md-4 basicForm">
                  <label htmlFor="price">Property Type</label>
                  <select className="form-control" name="Property Type" ref="property">
                      <option value="appartment">Appartment</option>
                      <option value="house">House</option>
                  </select>
              </div>
              <div className="col-md-4 basicForm">
                  <label htmlFor="price">Price</label>
                  <input type="textbox" ref="price" className="form-control" id="price" placeholder="Enter Price" required />
              </div>
              <div className="buttons">
                <button className="btn btn-primary">Back</button>
                <button className="btn btn-primary">Continue</button>
              </div>
            </div>
      );
  }

  renderDescription(){
    return(
        <div>
            <h3>Tell Rent Seekers about your space</h3>
            <hr/>
            <div className="col-md-6">
                <label htmlFor="listingName">Listing Name</label>
                <input ref="name" type="textbox" className="form-control" id="listingName" placeholder="Be clear" />
            </div>
            <div className="col-sm-6">
                <label htmlFor="summary">Summary</label>
                <textarea ref="summary" className="form-control" id="summary" rows="3"></textarea>
            </div>
             <div className="buttons">
                <button className="btn btn-primary">Back</button>
                <button className="btn btn-primary">Continue</button>
             </div>
        </div>
      );
  }

  renderLocation(){
    return(
        <div>
            <h3>Help guests find your place</h3>
            <p className="subtitle">will use this information to find a place that’s in the right spot.</p>
            <hr/>
            <div className="col-md-6">
                <label htmlFor="city">City</label>
                <input ref="city" type="textbox" className="form-control" id="city" placeholder="Biratnagar" />
            </div>
            <div className="col-md-6">
                <label htmlFor="placeName">Name of Place</label>
                <input ref="place" type="textbox" className="form-control" id="placeName" placeholder="Ganesh Chowk" />
            </div>
             <div className="buttons">
                <button className="btn btn-primary">Back</button>
                <button className="btn btn-primary">Continue</button>
             </div>
        </div>
      );
  }

  render(){
    if ( !this.props.form){
      return this.renderPersonalInfo();
    }

    const type = this.props.form.option;
    console.log(''type is'', type);

    if ( type === ''Personal Information''){
      return this.renderPersonalInfo();
    }

    if ( type === ''Basic Information''){
      return this.renderBasicInfo();
    }

    if ( type === ''Description''){
      return this.renderDescription();
    }

    if ( type === ''Location''){
      return this.renderLocation();
    }
}
}

function mapStateToProps(state){

  return{
    form: state.activeForm
  };
}

export default connect(mapStateToProps)(FormDetail);

Answer 1

Como está utilizando react-redux puede usar la forma redux. Te ayudará enormemente con la codificación, ya que simplificará tu carga de trabajo y también está libre de errores (hasta donde yo sé). En mi opinión, querrá usar todas las bibliotecas / frameworks que se le proporcionen ya que quiere ser lo más ágil posible.

Además, la forma redux tiene una implementación de formulario de asistente. Creo que eso es exactamente lo que estás buscando.

http://erikras.github.io/redux-form/#/examples/wizard?_k=yspolv

Simplemente siga el enlace y verá un muy buen tutorial sobre cómo implementarlo. Debería ser un pedazo de pastel.

Answer 2

Lo primero que te faltan es componentes controlados. Al dar a las entradas una propiedad de value y una función onChange , vinculará la entrada con un estado externo.

Sus componentes deben tener acceso, a través de react-redux, al estado y las acciones necesarias. El value de la forma debe ser su estado para ese objeto. Por lo tanto, puede tener un estado como:

location: {
  listingName: ''123 Main St'',
  summary: ''The most beautiful place!''
}

Luego, solo pasaría cada propiedad a las entradas. Supongo, en este ejemplo, que ha pasado el apoyo de location en mapStateToProps , y un objeto de actions con todas las acciones relacionadas en mapDispatchToProps :

changeHandler(ev, fieldName) {
  const val = ev.target.value;
  this.props.actions.updateField(fieldName, val);
},

render() {
  return (
    <input 
      value={this.props.location.listingName} 
      onChange={(ev) => { this.changeHandler(ev, ''listingName''}} 
    />
  );
}

Usted le proporciona una acción que puede usarse para actualizar el estado:

function updatefield(field, val) {
  return {
    type: UPDATE_FIELD,
    field,
    val
  };
}

Entonces, solo confúngalo, en tu reductor

switch (action.type) {
  case UPDATE_FIELD:
    state = { ...state, [action.field]: val };

(utilizando claves dinámicas y operador de extensión para pulcritud, pero es similar a Object.assign)

Todo su estado de forma vive en la tienda de Redux de esta manera. Cuando esté listo para enviar esos datos al servidor, puede usar acciones asíncronas con redux-thunk o configurar algún middleware para ejecutar las llamadas. De cualquier manera, la estrategia es la misma; su estado dura localmente y llena todos sus formularios, y luego se envía al servidor cuando el usuario envía.

Pasé por esto bastante rápido, hágamelo saber si necesita que le explique todo :)