Javascript 如何在选择时触发selectchange事件？

在我的无状态组件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;

const DebtType=（选项，handleChangeDebtType）=>{
console.log（选项）；
返回(
{options.options.map（option=>{
返回{option.label}；
})}
);
};
导出默认类型；

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

import React，{Component}来自“React”；
从“/DebtType”导入DebtType；
从“/mockData.json”导入mockOptions；
从“/ClearDebt”导入ClearDebtType；
从“redux表单”导入{reduxForm}；
从“react redux”导入{connect}；
类MyContainer扩展组件{
handleChangeDebtType=（）=>{
//将所选类型保存到存储
log（“handleChangeDebtType”）；
}
render（）{
返回(
);
}
}
常量mapStateToProps=状态=>({
//selectedDebtType：
});
MyContainer=connect(
MapStateTops，
未定义
)（MyContainer）；
导出默认reduxForm({
表单：“简单”//此表单的唯一标识符
})（MyContainer）；
//出口违约；

---

如何触发“handleChangeDebtType”事件？当前未触发。

更新了handleChangeDebtType函数，您的handleChangeDebtType函数名称中有轻微的键入错误

   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，{Component}来自“React”；
从“/DebtType”导入DebtType；
从“/mockData.json”导入mockOptions；
从“/ClearDebt”导入ClearDebtType；
从“redux表单”导入{reduxForm}；
从“react redux”导入{connect}；
类MyContainer扩展组件{
handleChangeDebtType=（）=>{
//将所选类型保存到存储
log（“handleChangeDebtType”）；
};
render（）{
返回(
{
this.handleChangeDebtType（）；
}}
/>
);
}
}
常量mapStateToProps=状态=>({
//selectedDebtType：
});
MyContainer=connect(
MapStateTops，
未定义
)（MyContainer）；
导出默认reduxForm({
表单：“简单”//此表单的唯一标识符
})（MyContainer）；
//出口违约；

取消组件道具的结构

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;

从“React”导入React；
常量债务人类型=（{options，handleChangeDebtType}）=>{
console.log（选项）；
返回(
{options.map（option=>{
返回{option.label}；
})}
);
};
导出默认类型；

您忘记做的只是在函数组件debutype中添加解构道具，在您的示例中，handleChangedebutype没有被作为函数拾取，这就是它没有触发的原因。在数组中循环时也不要忘记添加键

链接到固定代码沙盒：

从“React”导入React；
常量债务人类型=（{options，handleChangeDebtType}）=>{
console.log（选项）；
返回(
{options.map（（选项，索引）=>{
返回{option.label}；
})}
);
};
导出默认类型；

在handleChangeDebtType中定义箭头函数将在每个渲染上重新创建相同的箭头函数。而是在外部定义箭头函数，以便只定义一次。

import React from "react";

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

export default DebtType;