时间戳

首页 > 解决方案 > 如何在函数中传递 onChange 和 props

reactjs - 如何在函数中传递 onChange 和 props

问题描述

我正在尝试使用道具更改输入的 id，但我也在使用 onChange 事件。

import React from "react";

function Toggle({ onChange }) {
  return (
    <>
    <input type="checkbox" id="switch" onChange={onChange} />
      <label htmlFor="switch"></label>
    </>
  );
}

export default Toggle;

我试过这样：

import React from "react";

function Toggle({ onChange }, props) {
  return (
    <>
    <input type="checkbox" id={props.id} onChange={onChange} />
      <label htmlFor={props.id}>
      </label>
    </>
  );
}

export default Toggle;

我该怎么做呢？

标签： reactjsreact-props

解决方案

您正在解构道具，您可以获得其他值，如下所示：

{ onChange, ...props }

你的尝试

({ onChange }, props)

正在解构第一个参数，并假设有第二个参数称为 props

上面的...props模式称为“休息”模式，它也适用于数组

推荐阅读