Как вызвать событие selectchange при выборе?

В моем компоненте DebtType без сохранения состояния я запускаю 'handleChangeEventDebtType' в событии onChange:

const DebtType = (options, handleChangeEventDebtType) => {
  console.info(options);
  return (
    <select onChange = {handleChangeEventDebtType}>
      {options.options.map(option => {
        return <option>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

Этот компонент DebtType вызывается в MyContainer:

import React, { Component } from "react";
import DebtType from "./DebtType";
import mockOptions from "./mockData.json";
import ClearDebtType from "./ClearDebt";
import { reduxForm } from "redux-form";
import { connect } from "react-redux";

class MyContainer extends Component {
  handleChangeEventDebtType= () => {
    //save selected debttype to store
    console.info("handleChangeEventDebtType");
  }

  render() {
    return (
      <div>
        <DebtType
          options = {mockOptions.DEBT_TYPE}
          handleChangeEventDebtType = {this.handledChangeDebtType}
        />
        <ClearDebtType options = {mockOptions.CLEARDEBT_TYPE} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  //selectedDebtType:
});

MyContainer = connect(
  mapStateToProps,
  undefined
)(MyContainer);

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(MyContainer);

//export default ;

Как я могу вызвать событие «handleChangeEventDebtType»? В настоящее время не стреляет.

javascript reactjs

24.04.2019 08:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

обновлена функция handleChangeEventDebtType, незначительная опечатка в имени функции handleChangeEventDebtType

   import React, { Component } from "react";
import DebtType from "./DebtType";
import mockOptions from "./mockData.json";
import ClearDebtType from "./ClearDebt";
import { reduxForm } from "redux-form";
import { connect } from "react-redux";

class MyContainer extends Component {
  handleChangeEventDebtType = () => {
    //save selected debttype to store
    console.info("handleChangeEventDebtType");
  };

  render() {
    return (
      <div>
        <DebtType
          options = {mockOptions.DEBT_TYPE}
          handleChangeEventDebtType = {() => {
            this.handleChangeEventDebtType();
          }}
        />
        <ClearDebtType options = {mockOptions.CLEARDEBT_TYPE} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  //selectedDebtType:
});

MyContainer = connect(
  mapStateToProps,
  undefined
)(MyContainer);

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(MyContainer);

//export default ;

деструктурирован реквизит компонента

import React from "react";



const DebtType = ({options, handleChangeEventDebtType}) => {
  console.info(options);
  return (
    <select onChange = {handleChangeEventDebtType}>
      {options.map(option => {
        return <option key = {option.label}>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

Определение функции стрелки в handleChangeEventDebtType будет воссоздавать одну и ту же функцию стрелки при каждом рендеринге. Скорее определите функцию стрелки снаружи, чтобы она была определена только один раз.

— 24.04.2019 09:32

24.04.2019 09:07

Ответ принят как подходящий

Все, что вы забыли сделать, это добавить деструктурированные реквизиты к функциональному компоненту Тип долга , в вашем примере дескрипторChangeDebtType не воспринимался как функция, поэтому он не срабатывал. Также не забудьте добавить ключ при циклическом обходе массива.

Ссылка на фиксированные кодыandbox : https://codesandbox.io/s/kkxz980qw5

import React from "react";

const DebtType = ({ options, handleChangeEventDebtType }) => {
  console.info(options);
  return (
    <select onChange = {handleChangeEventDebtType}>
      {options.map((option, index) => {
        return <option key = {index}>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

24.04.2019 09:26

Другие вопросы по теме

Кнопка реакции для обновления (повторного вызова) API

Bundle.js по-прежнему содержит функцию стрелки и параметры по умолчанию после использования babel pollyfill

Как я могу исправить ошибку функционирования установки модуля react js npx

Каков правильный или эффективный способ композиции React Component?

ReactJS — prevState в новом хуке useState React?

Как добавить параметр в URL

Как скрыть какой-либо компонент на основе некоторого флага в реакции js

Проекты React, совместное использование между несколькими компьютерами

Как вернуть несколько Menu.Items в одном троичном выражении

Как обрабатывать вызовы API в методах жизненного цикла React?

Как вызвать событие selectchange при выборе?

Ответы 2

Другие вопросы по теме

Похожие вопросы