Uso el menú desplegable en la aplicación react js pero onChange no se está activando

Mi código es

import React from "react";
import PropTypes from "prop-types";
import Dropdown from 'react-dropdown';
const options = [
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two', className: 'myOptionClassName' },

 ];

 class WebDashboardPage extends React.Component {

  constructor(props) {
  super(props);
  this.state = {}
  }

 quan = (event)=> {
console.log("Option selected:");
 this.setState({ value: event.target.value });
};

render() {

return(
  <b><Dropdown className="dropdownCss" options={options} onChange={e => 
  this.quan(e.target.value)} /></b>
 );

}

Cuando hago clic en los elementos en el menú desplegable, muestra el error

"TypeError: no se puede leer la propiedad 'quan' de undefined"

Soy una novata para reaccionar gracias de antemano.

2
Mohammed Abdul kadhir 15 sep. 2018 a las 12:35

6 respuestas

La mejor respuesta

No hay problema con la biblioteca react-dropdown. Aquí está el sandbox de códigos que he configurado y corregido el código de OP. Funciona.

import React from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
const options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two", className: "myOptionClassName" }
];
const defaultOption = options[0];
class WebDashboardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: ""
    };
  }

  quan = value => {
    this.setState({ selectedValue: value });
  };

  render() {
    return (
      <Dropdown options={options} value={defaultOption} onChange={this.quan} />
    );
  }
}

export default WebDashboardPage;  
1
Murli Prajapati 15 sep. 2018 a las 11:11

Solo realicé una pequeña refactorización del código. El cambio principal está en cómo Dropdown maneja el cambio. Cuando pasa una función a handleChange, Dropdown llama a la función internamente y le pasa el objeto seleccionado, por lo que todo lo que tenía que hacer era crear un método de controlador que tuviera un parámetro que use para actualizar el estado. También establecí un estado inicial para el valor. Aquí hay una demostración https://codesandbox.io/s/4qz7n0okyw

import React,  { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import Dropdown from "react-dropdown";

const options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two", className: "myOptionClassName" }
];

class WebDashboardPage extends Component {
  state = {
    value: {}
  };

  quan = value => {
    console.log("Option selected:", value);
    this.setState({ value });
  };

  render() {
    return (
      <Fragment>
        <Dropdown
          className="dropdownCss"
          options={options}
          onChange={this.quan}
        />
      </Fragment>
    );
  }
}

export default WebDashboardPage;
0
kingisaac95 16 sep. 2018 a las 20:45

La dependencia desplegable que está utilizando no se activa onChange con el evento como argumento, sino que se activa onChange con la opción seleccionada. Intente cambiar

onChange={e => 
  this.quan(e.target.value)}

Para

onChange={this.quan}

Y cambiar quan a

quan = (selectedOption)=> {
 console.log("Option selected:"+selectedOption.value);
 this.setState({ value: selectedOption.value });
};

Lo he probado en mi máquina y funciona perfectamente. Además, lo siguiente importante es no poner las opciones de la forma en que lo está haciendo, sino ponerlas en estado. mi código final es

class WebDashboardPage extends Component {

constructor(props) {
super(props);

const options = [
  {
    value: 'one',
    label: 'One'
  }, {
    value: 'two',
    label: 'Two',
    className: 'myOptionClassName'
  }
];

this.state = {options}
}

quan = (selectedOption) => {
console.log("Option selected:" + selectedOption.value);
this.setState({value: selectedOption.value});
};
render() {
return (<b><Dropdown className="dropdownCss" options={this.state.options} onChange={this.quan}/></b>);
}
}
0
Abhijet 15 sep. 2018 a las 11:15

Parece que el problema es con el componente react-dropdown en sí mismo. Tendrá que presentar un problema allí.

El componente react-dropdown podría no estar usando this.props.onChange en algún lugar o podría estar usando problemas.


¿O es probable que el componente requiera un estado value que no se haya definido?

this.state = {
  value: ''
}

¿Y estaba causando el problema?

0
4 revs 15 sep. 2018 a las 10:48

Deberías hacerlo de esta manera:

<Dropdown className="dropdownCss" options={options} onChange={this.quan} />

Prueba esto:

 class WebDashboardPage extends React.Component {

      constructor(props) {
      super(props);
      this.state = { value: '' }
      this.quan = this.quan.bind(this);
      }

     quan(event) {
     console.log("Option selected:");
     this.setState({ value: event.target.value });
    };

    render() {

    return(
      <div><Dropdown className="dropdownCss" options={options} onChange={this.quan} /></div>
     );

    }
0
Jaz 15 sep. 2018 a las 10:05

Cambiar a onChange={this.quan}, también en el estado inicial debe indicar su valor this.state.value

this.state = {
 value: ''
}

También trate de aprenderlo en html element, no en jsx

0
Kamil Staszewski 15 sep. 2018 a las 09:40