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;

在MyContainer中调用此DebtType组件：

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

更新了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 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;

Answer 2

您忘了要做的就是将分解后的道具添加到功能组件 DebtType 中，在您的示例中，没有选择 handleChangeDebtType 作为函数，这就是为什么没有开火。同样不要忘记在遍历数组时添加键。

链接到固定代码和框：https://codesandbox.io/s/kkxz980qw5

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;

如何在select上触发selectchange事件？

2 个答案: