Estoy usando el diseño Ant y tienen un componente llamado Switch , Switch tiene un controlador de eventos personalizado
import "./styles.css"; import "antd/dist/antd.css"; import { Switch } from "antd"; import { useState } from "react"; export default function App() { const [status, setStatus] = useState(true); const handleChange = (e) => { // e is a boolean variable, true or false console.log(e); setStatus(e); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <Switch checked={status} onChange={handleChange}></Switch> </div> ); }y tengo muchas preguntas sobre ese tipo de sintaxis
onChange={handleChange}es equivalente a
onChange={(e) => handleChange(e)} onChange={handleChange} ¿Cómo puedo pasar el controlador de eventos reales a handleChange para hacer algo de stopPropagation , algo como
const handleChange = (e, reale) => { reale.stopPropagation() setStatus(e); };Codesandbox simple para entender lo que dije.
Lo hace
onChange={handleChange}
es equivalente a
onChange={(e) => handleChange(e)}
Son equivalentes si y solo si la función recibe un argumento. Pero para los interruptores de diseño de hormigas, onChange en realidad pasa dos parámetros: el nuevo valor y el objeto de evento. Entonces, si desea crear una nueva función y luego llamar a handleChange en esa función, probablemente querrá pasar ambos parámetros a través de:
onChange={(value, e) => handleChange(value, e)}Puedes escribir algo como
onChange={(e) => handleChange(e, reale)}