Historia:

Tengo un formulario y quiero hacer cosas con los valores de ese formulario. Para el fondo, estoy usando react y react-bootstrap para hacer este formulario, aunque estoy más que dispuesto a usar un formulario simple (sin react-bootstrap) si resulta más simple.

Mi forma:

<form>
    <FormGroup controlId="formControlsSelect" className={classes.formGroup}>
        <ControlLabel className={classes.exportMessage}>Export</ControlLabel>
        <FormControl className={classes.selectControl} ref='exportType'
            componentClass="select" placeholder="Choose Option">
            <option value="text">Plain text</option>
            <option value="html">Simple HTML</option>
        </FormControl>
    </FormGroup>
    <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='default'
            onClick={this.handleClose}>Cancel</Button>
    <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='primary'
            type='submit' onSubmit={this.handleOnSubmit}>
        <FontAwesome className={classes.download} name="download" />Export</Button>
</form>

Detalles

  • Tengo 1 entrada de tipo select (¿no estoy seguro si digo esto correctamente?)
  • Este formulario está dentro de un modal que aparece después de hacer clic en un botón y handleClose cierra el modal.
  • Quiero poder usar el value del select como parámetro en una llamada de búsqueda para más adelante.
    • Tengo problemas para obtener este valor

Que estoy haciendo:

Al enviar:

handleOnSubmit(e) {
    e.preventDefault();
    // formSelectValue = ???
    console.log(this.refs.exportType);
    // fetchAndDownloadExportFile(listOfItems, formSelectValue);
    this.handleClose();
}

Esto no esta funcionando. la referencia no se envía a la consola. La página se actualiza, pero justo antes, recibo un error en la consola:

Error in event handler: TypeError: Cannot read property 'getCurrent' of undefined at e (chrome-extension://blahblah)

Lo que he probado:

Intenté eliminar type="submit" del botón Export, usando onClick en su lugar, y luego imprime el FormControl ref'd, pero no veo nada que indique cuál de las dos opciones He seleccionado

Final:

Todo lo que quiero es poder seleccionar una de dos opciones de un menú desplegable, texto sin formato value="text" o html simple value="html" y luego pasar ese valor como parámetro a una función (no relacionada) que pueda luego usar en una búsqueda.

Otra información posiblemente útil: estoy obteniendo datos de un punto final API con

@RequestMapping(
    value = '/api/export',
    method = RequestMethod.POST,
    consumes = [MediaType.APPLICATION_JSON_VALUE],
    produces = [MediaType.TEXT_HTML_VALUE, MediaType.TEXT_PLAIN_VALUE]
)
0
James B 2 ene. 2020 a las 20:09

2 respuestas

La mejor respuesta

Debe hacer esto de la forma de reacción, que es mantener el valor de la entrada de selección en un estado y recuperarlo cuando lo necesite. Para mantener el valor de selección en un estado, agregue un controlador de eventos onChange en la entrada de selección de esta manera:

<FormControl className={classes.selectControl} componentClass="select" placeholder="Choose Option" onChange={this.handleChange} name="mySelectInput">

Observe que he agregado un name property a la entrada de selección

Con el handleChange como se muestra a continuación:

handleChange = (evt)=> { // If you are using typescript, type evt like this evt: React.ChangeEvent<HTMLInputElement>
    const target = event.target;
    const value = target.value;
    const name = target.name;

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

La función handleChange guardará el valor de la entrada de selección en el estado. Ahora puedes recuperarlo y usarlo así:

const {mySelectInput} = this.state;

A continuación se muestra un ejemplo completo que puede ver:

    class MyAwesomeComponent extends React.Component {

        constructor() {
          super()
          this.state = {
             mySelectInput: ""
          }
          this.handleOnSubmit = this.handleOnSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this)
       }

        handleChange = (evt)=> {
           const target = event.target;
           const value = target.value;
           const name = target.name;

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


        handleOnSubmit(e) {
            e.preventDefault();

            // retrieve the value of the select input like this
            const {mySelectInput} = this.state; 

            // and use it here
        }

        render(){
           return(
                <form>
                   <FormGroup controlId="formControlsSelect" className={classes.formGroup}>
                      <ControlLabel className={classes.exportMessage}>Export</ControlLabel>
                       <FormControl className={classes.selectControl} componentClass="select" placeholder="Choose Option" onChange={this.handleChange} name="mySelectInput">
                          <option value="text">Plain text</option>
                          <option value="html">Simple HTML</option>
                       </FormControl>
                  </FormGroup>
                  <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='default'
            onClick={this.handleClose}>Cancel</Button>
                  <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='primary'
            type='submit' onSubmit={this.handleOnSubmit}>
        <FontAwesome className={classes.download} name="download" />Export</Button>
</form>
           )
        }
    }
1
lomse 2 ene. 2020 a las 17:39

Su función handleOnSubmit(e) no tiene el evento correcto que está buscando.

Debe observar el evento select input con un controlador de cambios y luego guardar el valor actualizado en algún lugar (como el estado) para que pueda usar ese valor en su función handleOnSubmit

0
Travis James 2 ene. 2020 a las 17:25