我試圖從子組件向父級中的陣列添加數字。當我嘗試僅根據亂數發送資料時，這些數字似乎很混亂。（我試圖建立的游戲是 Lights Out）
家長：
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;而孩子：
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;（如果亂數為 1 ，則在將數字添加到陣列的父級上運行該函式）并且您可以看到，當我運行它時，該陣列不是基于真偽，它只是添加數字：（應該是僅顯示陣列中的淺色..)
chrome 中問題的影像
uj5u.com熱心網友回復：
您將addNumber在父級中創建一個方法，并將其作為道具傳遞給子級。與孩子互動的用戶呼叫addNumber，將新值推送給父級。
與基于類的遺留組件相比，基于函式的組件是完成所有這些作業的更好方法。
uj5u.com熱心網友回復：
您可以將parent組件中的方法child作為道具傳遞給組件。
這里簡單的例子：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339786.html
標籤：javascript 反应
上一篇：具有不同ID的多個按鈕到一個變數