React with Typescript EventHandler 类型检查问题 (onClick)

Question

这些天我一直在用 Typescript 练习 React。

我的 PropsType 如下

export type PropType = {
  ingredientAdded: (type: keyof IngredientType) => void;
}

和

const buildControl: React.FunctionComponent<PropType> = (props) => (
  <div className={classes.BuildControl}>
    <div className={classes.Label}>{props.label}</div>
    <button className={classes.Less}>Less</button>
    <button className={classes.More} onClick={props.ingredientAdded as any}>More</button>
  </div>
);

作为身体。

这里的问题是我不能通过 onClick={props.ingredientAdded} 而不强制转换。

当我查看 onClick 类型时，它给了我

onClick?: MouseEventHandler<T>;
type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;

似乎ingredientAdded: (type: keyof IngredientType) => void; 函数类型对onClick 无效。

不管怎样都行。

我的问题是在这里进行类型检查而不是强制转换为 any

的正确方法是什么

编辑

父组件传递函数。

type PropsType = {
  ingredientAdded(type: keyof IngredientType): void;
  ingredientRemoved(type: keyof IngredientType): void;
}

const controls: { label: string, type: keyof IngredientType }[] = [
  { label: 'Salad', type: 'salad' },
  { label: 'Bacon', type: 'bacon' },
  { label: 'Cheese', type: 'cheese' },
  { label: 'Meat', type: 'meat' },
];

const buildControls: React.FunctionComponent<PropsType> = (props) => (
  <div className={classes.BuildControls}>
    {controls.map(ctrl => (
      <BuildControl
        ingredientAdded={() => props.ingredientAdded(ctrl.type)}
        ingredientRemoved={() => props.ingredientRemoved(ctrl.type)}
        key={ctrl.label} label={ctrl.label} />
    ))}
  </div>
);

export default buildControls;

Answer 1

请尝试将props.ingredientAdded 包装在一个函数中。

没有点击事件

const buildControl: React.FunctionComponent<PropType> = (props) => (
  <div className={classes.BuildControl}>
    <div className={classes.Label}>{props.label}</div>
    <button className={classes.Less}>Less</button>
    <button className={classes.More} onClick={() => { props.ingredientAdded() }}>More</button>
  </div>
);

有点击事件

const buildControl: React.FunctionComponent<PropType> = (props) => (
  <div className={classes.BuildControl}>
    <div className={classes.Label}>{props.label}</div>
    <button className={classes.Less}>Less</button>
    <button className={classes.More} onClick={(event: React.MouseEvent) => { props.ingredientAdded(event) }}>More</button>
  </div>
);

Answer 2

这是因为 React 上的 onClick 期望您传递一个带有单个参数的函数，即鼠标事件。

你可以通过两种方式解决它：

1. 用箭头函数包裹onClick：

  // ...
  onClick={ (event) => { props.ingredientAdded(type) } }

1. （最好的方法！） 在按钮的子组件上执行此逻辑，这样您的事件处理程序就不会明确知道 ingredientAdded 的依赖关系：

interface IngredientType {
  type: string;
}

export type PropType = {
  handler: (type: keyof IngredientType) => void;
  type: keyof IngredientType;
};

const MoreButton: React.FunctionComponent<PropType> = props => {
  const handleClick = () => {
    props.handler(props.type);
  };

  return <button onClick={handleClick}>More</button>;
};

const MainComponent = ({ingredientAdded, type}) => {
  return <MoreButton handler={ingredientAdded} type={type} />
}

Check the example for the second way.