Tengo un problema con el envío de accesorios en el mismo componente y la función no es un problema de función. Entonces, ¿cómo resolver el problema?
import React, { useState } from 'react'; export default function Lifting() { const [data, setData] = useState(0); function globalChange(items) { setData({ data: items }); } return ( <div> <h1>Lifting State Up</h1> <LiftingChild val={data} onChange={globalChange} /> <br /> <LiftingChild val={data} onChange={globalChange} /> </div> ) } function LiftingChild(props) { return ( <div> <input value={props.val} onChange={(e) => { props.globalChange(e.target.value) }} /> </div> ) }Es solo un problema de nombres. Cuando usó el componente LiftingChild , agregó globalChange como accesorio onChange, pero en el componente LiftingChild intenta llamar a globalChange que no existe. Debe llamarlo como props.onChange .
<input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />EDITAR: Esto expone que la forma en que se llamó a setData también es incorrecta. Está configurando el nuevo estado para que sea un objeto, pero solo debe ser el número para que pueda continuar usándose en el estado del formulario.
function globalChange(item) { setData(item); }Tenga en cuenta que debido a que ambos componentes secundarios usan el mismo estado, actualizar uno actualizará ambos. Esto podría ser deseable o no dependiendo del caso de uso.
Poniéndolo todo junto, debería verse así:
const { useState } = React; function Lifting() { const [data, setData] = useState(0); function globalChange(items) { setData(items); } return ( <div> <h1>Lifting State Up</h1> <LiftingChild val={data} onChange={globalChange} /> <br /> <LiftingChild val={data} onChange={globalChange} /> </div> ) } function LiftingChild(props) { return ( <div> <input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} /> </div> ) } ReactDOM.render(<Lifting />, document.getElementById('react')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>