javascript - 如何在选择上触发选择更改事件？

Question

在我的无状态组件 DebtType 中，我触发了“handleChangeDebtType” 在 onChange 事件上:

const DebtType = (options, handleChangeDebtType) => {
  console.log(options);
  return (
    <select onChange={handleChangeDebtType}>
      {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 {
  handleChangeDebtType= () => {
    //save selected debttype to store
    console.log("handleChangeDebtType");
  }

  render() {
    return (
      <div>
        <DebtType
          options={mockOptions.DEBT_TYPE}
          handleChangeDebtType={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 ;

如何触发“handleChangeDebtType”事件？目前它没有开火。

Answer 1

更新了 handleChange DebtType 函数，您的 handleChange Debt Type 函数名称中的小拼写错误

   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 {
  handleChangeDebtType = () => {
    //save selected debttype to store
    console.log("handleChangeDebtType");
  };

  render() {
    return (
      <div>
        <DebtType
          options={mockOptions.DEBT_TYPE}
          handleChangeDebtType={() => {
            this.handleChangeDebtType();
          }}
        />
        <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, handleChangeDebtType}) => {
  console.log(options);
  return (
    <select onChange={handleChangeDebtType}>
      {options.map(option => {
        return <option key={option.label}>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;