Estoy tratando de agregar números a una matriz en el elemento principal del componente secundario. cuando trato de enviar datos solo en función de un número aleatorio, parece que los números están confundidos. (el juego que estoy tratando de construir es Lights Out)
Padre:
import "./App.css"; import Square from "./Square"; import react, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { lightNums: [], }; } showNum(n) { this.setState((st) => ({ lightNums: [...st.lightNums, n], })); } arr = Array.from({ length: 25 }).map((e, g) => { return <Square num={g} key={g} showNum={this.showNum.bind(this)} />; }); render() { return <div className="App">{this.arr}</div>; } } export default App;Y el niño:
import react, { Component } from "react"; import "./Square.css"; class Square extends Component { constructor(props) { super(props); this.clickHandler = this.clickHandler.bind(this); this.state = { clicked: this.rand(this.props.num), }; } clickHandler(e) { this.props.showNum(this.props.num); this.setState((st) => ({ clicked: st.clicked ? false : true })); } rand = (num) => { const rand = Math.floor(Math.random() * 2); if (rand === 1) { this.props.showNum(num); return true; } else { return false; } }; classN = () => `square ${this.state.clicked ? "clicked" : ""}`; render() { return ( <div className={this.classN()} onClick={this.clickHandler}> {this.props.num} </div> ); } } export default Square;(si el número aleatorio es 1, ejecute la función en el padre que agrega el número a la matriz) Y puede ver que cuando lo ejecuto, la matriz no se basa en el verdadero o falso, solo agrega números: (se supone que mostrar solo los colores claros en la matriz ..)
Crearía un método addNumber en el padre y se lo pasaría al hijo como accesorio. El usuario, al interactuar con el niño, llama a addNumber y envía el nuevo valor al padre.
Los componentes basados en funciones son una mejor manera de hacer todo esto, a diferencia de los componentes heredados basados en clases.
Puede pasar un método de su parent al componente child como accesorios.
Aquí un ejemplo simple:
const { useState, useCallback } = React; function Child({ onChange }) { return <input type="text" onChange={(e) => onChange(e.target.value)} />; } function App() { const [name, setName] = React.useState(""); const handleClick = useCallback((e) => { setName(e); }, []); return ( <div> <div>{name}</div> <Child onChange={handleClick} /> </div> ); } ReactDOM.render(<App />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>