設定另一個組件狀態的最佳方法

有一些帖子解釋了如何從另一個組件更新狀態，但我仍然無法決議我的特定問題的解決方案。我希望組件中的提交按鈕在單擊時在SideBar.js組件中觸發。這將導致 的狀態隨著從到的變化而變化，從而產生不同的形式。由于我的設計布局，我無法將組件匯入我的！還包含影像。有任何想法嗎？nextProblem()tableA.jstableA.jsproblemNum12SideBar.jstableA.jsSideBar.js

我正在使用 CSS 網格來布局我的頁面：

    grid-template-areas:
        "navbar navbar navbar navbar"
        "sidebar tableA ... ..."
        "sidebar tableA ... ..."
        "sidebar tableA ... ..."

我正在使用 App.js 路由到頁面：

function App() {
  return (
      <Router>
        <div className="App">
          <Routes>
              <Route path={"/"} exact element={<MainPage/>}/>
              <Route path={"/gamePage"} exact element={<GamePage/>}/>
          </Routes>
        </div>
      </Router>
  );
}

export default App;

我創建了一個SideBar.js組件，其中包含頂部的徽標和submit底部的按鈕：

class SideBar extends Component {
    componentDidMount() {

    }
    render() {
        return (
            <div className={"sidebar"}>
                <div className={"logo_group"}>
                    <img className={"some_logo"} src={logo}/>
                </div>
                <div className={"nav_group"}>
                    <button className={"home"}/>
                    <button className={"about"}/>
                </div>
                <img className={"an_image"} src={someImage}/>
                <div className={"button_group"}>
                    <button className={"submit_button"} onClick={() => nextProblem()}>Submit</button>
                </div>
            </div>
         )
    }
}
export default SideBar

以及具有更改組件狀態的tableA.js功能nextProblem()的組件：

class tableA extends Component {
    state = {
        problemNum: 1,
        problemStatus: 'unsolved',
        userAnswer: []
    };

    nextProblem = () => {
        this.setState(state => ({
            problemNum: state.problemNum   1,
        }))
    }

    componentDidMount() {}

    render() {
        return (
            <div>
                <form>
                     ...depends on the state of the problem number
                </form>
            </div>
        )
    }

export default tableA

然后我將所有內容合并到GamePage.js：

const GamePage= () => {
    return (
        <div className={"gamepage-container"}>
            <div className={"navbar"}>
                <NavBar></NavBar>
            </div>
            <div className={"sidebar"}>
                <SideBar></SideBar>
            </div>
            <div className={"tableA"}>
                <TableA></TableA>
            </div>
            ...
        </div>
      )
}

export default GamePage

uj5u.com熱心網友回復：

我可能會采取讓游戲頁面處理狀態等的方法，并將問題和更新功能作為道具發送到組件中。根據這件事情的發展規模，您還可以使用集中式商店。

const GamePage= () => {
    const [problem, setPropblem] = useState(0)

    return (
        <div className={"gamepage-container"}>
            <div className={"navbar"}>
                <NavBar></NavBar>
            </div>
            <div className={"sidebar"}>
                <SideBar 
                    onSetNext={() => setProblem(problem   1)}
                ></SideBar>
            </div>
            <div className={"tableA"}>
                <TableA
                    problem={problem}
                ></TableA>
            </div>
            ...
        </div>
      )
}

export default GamePage

在您的側邊欄中，按鈕變為

<button className={"submit_button"} onClick={() => this.props.onSetNext()}>Submit</button>

同樣，您訪問的是 props.propblem 而不是表中的狀態。

標籤：javascript 反应 成分 状态

上一篇：False“要插入新節點的節點不是該節點的子節點。”

下一篇：如何獲取由不同HTML標簽分隔的文本