如何在函数中传递 onChange 和 props

Question

我正在尝试使用道具更改输入的 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;

我该怎么做？

Answer 1

你正在解构 props，你可以像这样获取其他值：

{ onChange, ...props }

你的尝试

({ onChange }, props)

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

上面的 ...props 模式称为 "rest" pattern，它也适用于数组

Answer 2

你也可以解构id。

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

如何在函数中传递 onChange 和 props

How to pass onChange and props in a function

reactjs

react-props