[英]In react - updating an array from child component to a parent component
Im trying to add numbers to an array in the parent from the child component .我试图从子组件向父级中的数组添加数字。 when i try to send data only based on a random number it seems that the numbers are confused .当我尝试仅根据随机数发送数据时,这些数字似乎很混乱。 (the game im trying to bulid is Lights Out) (我试图建立的游戏是 Lights Out)
Parent :家长:
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;
And the child :而孩子:
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;
(if the random number is 1 , run the function on the parent that add the number to array) And you can see that when i run it the array is not based on the true or false, it is just adding numbers : (supposed to show only the light colors in the array..) (如果随机数为 1 ,则在将数字添加到数组的父级上运行该函数)并且您可以看到,当我运行它时,该数组不是基于真假,它只是添加数字:(应该是仅显示阵列中的浅色..)
You would create an addNumber
method in the parent, and pass it to the child as a prop.您将在父级中创建一个addNumber
方法,并将其作为道具传递给子级。 User, interacting with the child, calls the addNumber
, pushing the new value to the parent.与孩子交互的用户调用addNumber
,将新值推送给父级。
Function based components are a better way to do all of this, as opposed to the legacy class based components.与基于类的遗留组件相比,基于函数的组件是完成所有这些工作的更好方法。
You can pass a method from your parent
component to the child
component as props.您可以将parent
组件的方法作为道具传递给child
组件。
Here simple example:这里简单的例子:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.