onChange не запускается в реакции JS

Question

Я использую выпадающий список в приложении реагировать на js, но onChange не запускается

мой код

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>
 );

}

когда я нажимаю на элементы в выпадающем списке, появляется ошибка

"Ошибка типа: невозможно прочитать свойство 'quan' из неопределенного"

Я новичок, чтобы реагировать заранее спасибо

Answer 1

Я сделал лишь небольшой рефакторинг кода. Главное изменение в том, как Dropdown обрабатывает изменения. Когда вы передаете функцию в handleChange, Dropdown вызывает ее внутренне и передает выбранный объект ей, поэтому вам всего лишь нужно создать метод-обработчик, имеющий один параметр, который вы будете использовать для обновления государство. Я также установил начальное состояние для значения. Вот демо 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;

Answer 2

Нет проблем с библиотекой react-dropdown.Вот песочница с кодом , которую я настроил и исправил код OP.Оно работает.

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;  

Answer 3

Используемая раскрывающаяся зависимость не запускает onChange с событием в качестве аргумента, а запускает onChange с выбранным параметром. Попробуйте изменить

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

до

onChange={this.quan}

и измените quan на

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

Я попробовал его на своей машине, и он отлично работает. Также следующая важная вещь - не ставьте параметры так, как вы делаете, а переводите их в состояние. мой окончательный код

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>);
}
}

Answer 4

Кажется, проблема в самом компоненте react-dropdown.Вам нужно будет подать проблему там.

react-dropdown компонент, возможно, не использует this.props.onChange где-то или может использовать проблематично.

---

Или, возможно, компоненттребуется value состояние, которое не определено?

this.state = {
  value: ''
}

И вызывало проблему?

Answer 5

Вы должны просто сделать это так:

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

Попробуйте это:

 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>
     );

    }

Answer 6

Изменить на onChange={this.quan}, также в исходном состоянии вы должны указать свой this.state.value

this.state = {
 value: ''
}

также попробуйте изучить его на элементе html, а не на jsx