HTML onSubmit / onClick 处理函数可以有除事件之外的另一个参数吗？ [复制]

Posted 2023-02-21

【中文标题】HTML onSubmit / onClick 处理函数可以有除事件之外的另一个参数吗？ [复制]

【英文标题】：can HTML onSubmit / onClick handler function have another parameter except event? [duplicate]

【发布时间】：2020-10-22 04:16:30

【问题描述】：

我面临一些onClick 或onSubmit 函数需要event 和parameter 的情况。 我可以在 react 或 vanilla html 标签中使用这个吗？

或者，只是使用其他函数做一些副作用？

const CustomFC = () => 
  const [ id, setId] = useState("");
  const [password, setPassword] = useState("");
  
  type FormParams = 
    id: string;
    password: string; 
  
  const customClickHandler = useCallback((params: FormParams) => 
  
    dispatch(params); 
  , [id, password]);

  const onChangeId = useCallback((id) => setId(id),[]);
  const onChangePassword = useCallback((password) => setPassword(password),[]);   
  
  <Form
     onClick =customClickHandler
     onChange=onChangeId, onChangePassword
  />


// Form.tsx
const Form = (
  onSubmit,
  onChange,
) => 
  const  onChangeId, onChangePassword  = onChange; 
  const handleSubmit = ( e, params ) =>  // <- can this be possible? 
    e.preventDefault();
    onSubmit(params);
  
  return (
    <form onSubmit=handleSubmit>
      <input ... />
      <input ... />
    </form>
  )

  

【参考方案1】：

是的，您可以这样做：

const handleClick = (event, parameter) => 
   // do stuff

然后这样称呼它：

onClick=(event) => handleClick(event, parameter)

这有帮助吗？

在你的情况下是：

  return (
    <form onSubmit=(event) => handleSubmit(event, parameter)>
      <input ... />
      <input ... />
    </form>
  )

【讨论】：

如何为parameter 提供值？

这并不是事件监听器上的额外参数——它只是使用额外参数调用不同的函数。

该值来自您的函数。请在投票之前尝试我的代码。这行得通。

您的代码从未为parameter 提供任何值。您只展示了一个需要两个参数的函数，但实际上它只会传递一个 (event)。而且，这里的实际答案是“否”，但有一种解决方法，而不是“是”。

@GrantSingleton 感谢您的回答。给你点赞后让我试试。如果你继续在你的程序中使用你的方法，我想你刚刚在这里提到它是完全值得的。

【参考方案2】：

任何本机事件处理程序都只有一个 event 参数，但您可以使用本机处理程序调用具有自定义参数的第二个函数：

document.querySelector("button").addEventListener("click", function(event)
  actualHandler(event, this.id, this.dataset.test, this.className);
);

function actualHandler(event, id, dataTest, classList)
  console.log(event.type, id, dataTest, classList);

<button id="btn" data-test="foo" class="bar">Click Me</button>

【讨论】：

感谢您的 sn-p 解释。如此简短实用。