1

Necesito capturar el valor que se obtiene del select al elegir una opción, este guardarlo en una variable para usarlo en una validación posterior

<div className='input-field col s12 m4 l4'>                         
     <i className='material-icons prefix'>contacts</i>
         <select>
          {
           this.state.getProfile.map((profile)=>
            <option key={profile.value} value={profile.value}>{profile.text}</option>
                                     )
          }
         </select>
</div>
1
  • lamento no haberme explicado bien, Pues el valor que se obtiene del select al seleccionar (valga la redundancia) guardarlo en una variable para usarlo en una validación posterior el 14 feb. 2019 a las 14:50

1 respuesta 1

0

Para guardar el valor de un select en el estado lo harías como cualquier otro componente controlado, de hecho si te fijas en la documentación mencionan <input>, <textarea> y <select>

Debes pasarle dos argumentos al tag de JSX, value que contendrá el valor seleccionado en el estado y onChange que se ejecuta cada que hay un cambio en el <select> y lo que utilizaremos para asignar un nuevo valor al estado junto con setState()

const countries = [
  {
    value: 'ecuador',
    name: 'Ecuador'
  },
  {
    value: 'mexico',
    name: 'México'
  },
  {
    value: 'uruguay',
    name: 'Uruguay'
  },
  {
    value: 'peru',
    name: 'Perú'
  },
  {
    value: 'argentina',
    name: 'Argentina'
  },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'uruguay'};

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

  handleChange(event) {
    console.log(`Seleccionaste ${event.target.value}`);
    this.setState({value: event.target.value});
    setTimeout(() => console.clear(), 1000);
  }

  handleSubmit(event) {
    alert('Tu país es: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Elije un país:
          {' '}
          <select value={this.state.value} onChange={this.handleChange}>
            {countries.map(country => <option key={country.value} value={country.value}>{country.name}</option>)}
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.