0

Tengo el siguiente componente que renderiza un select:

import React from 'react'; import Select from 'react-select';

const InputSelect = props => {
  return (
   <React.Fragment>
    {props.label && <label htmlFor={props.name}>{props.label}</label>}
    <Select
     name={props.name}
     options={props.options}
     placeholder={props.placeholder}
     isSearchable={props.isSearchable}
     isClearable={props.isClearable}
     isLoading={props.isLoading}
     value={props.value}
     getOptionValue={option => option.pk}
     getOptionLabel={option => option.label || option.name}
     onChange={value => props.onChange(props.name, value)}
     noOptionsMessage={() => props.noOptionsMessage}
     styles={{
      control: base => ({
        ...base,
        border: props.error ? '1px solid #dc3545' : '1px solid #ced4da',
      })
     }}
   />
   {props.error && <p className='text-danger'>{props.error}</p>}
 </React.Fragment>
 ); 
};

export default InputSelect;

Asi es como se ve actualmente. Yo quiero pasarle las clases de bootstrap ´´form-control form-control-sm´´con la idea de que el select se achique y tome el mismo tamaño que todos los demas inputs del sitio, que tienen estas clases que mencioné.

introducir la descripción de la imagen aquí

Entonces lo que yo hago es agregarle la prop ´´className='form-control form-control-sm´´pero el resultado no es el que espero:

introducir la descripción de la imagen aquí

El navegador me muestra esto:

introducir la descripción de la imagen aquí

1
  • Bueno, todavia no pude solucionar este problema pero sí una parte: Lo que hice fue agregarle propiedades a mano en el objeto Style. El tema es que me queda el contenido en la parte inferior del input. Intento centrarlo verticalmente agregandole display flex y align items center al Select pero no funciona.
    – Agustin G.
    Commented el 29 nov. 2020 a las 19:15

1 respuesta 1

0

Hola amigo espero que te ayude este comentario ten encuenta que cuando creamos un componente nuevo lo hacemos con bas. es base seria no por que seria el componente que traemos ahora si entendi bien lo que quieres es crear in select.

En HTML, crea una lista desplegable. Por ejemplo, este HTML crea una lista desplegable de sabores:

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

Ten en cuenta que la opción Coco es inicialmente seleccionada, debido al atributo selected. React, en lugar de utilizar el atributo selected, utiliza un atributo value en la raíz de la etiqueta select. Esto es más conveniente en un componente controlado debido a que solo necesitas actualizarlo en un solo lugar, por ejemplo:

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

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

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

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

si quieres probarlo

Ahora lee más documentación.

Documentación

1
  • Te agradezco, mi intencion es usar el Select que ofrece la libreria 'react-select', que ya estaba implementado en el proyecto con el que me encuentro. Lo que tenia que hacer era pasarle un objeto Style al componente Select con las propiedades sacadas del estilo de bootstrap que queria. Gracias por tu tiempo de todas maneras
    – Agustin G.
    Commented el 30 nov. 2020 a las 21:03

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.