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

IT技术 javascript reactjs
2021-05-27 19:44:50

我面临一些情况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>
  )
}
2个回答

是的，你可以这样做：

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

然后像这样调用它：

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

这有帮助吗？

在您的情况下，它将是：

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

任何本机事件处理程序都只有一个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>

其它你可能感兴趣的问题
上一篇create-react-app 返回错误：执行时找不到module“react-scripts/scripts/init.js” 下一篇如何使用 ASP.NET Core 解决 REACT 中的 CORS 错误