Javascript React：在页面、导航栏和模式组件之间传递状态

我仍在尝试了解React中组件之间的传递状态。我有一个

NavigationBar

和

runsimmodal

组件，带有一个

Ratings

页面

用户在

评级

页面上调整输入，该页面包含进入

运行模式

的输入。我不确定如何执行此操作，因为只能从

导航栏

访问

RunSimsModal

。

导航栏

在任何时候都不知道

分级

状态。如何将数据/状态从

评级

传递到

运行模式

NavigationBar.js

import React, {useState} from "react";
import { Nav, Navbar, Form, FormControl, Button } from "react-bootstrap";
import styled from "styled-components";
import RunSimsModal from "./RunSimsModal";

const Styles = styled.div`
  .navbar {
    background-color: #222;
  }
  a,
  .navbar-nav,
  .navbar-light .nav-link {
    color: #9fffcb;
    &:hover {
      color: white;
    }
  }
  .navbar-brand {
    font-size: 1.4em;
    color: #9fffcb;
    &:hover {
      color: white;
    }
  }
  .form-center {
    position: absolute !important;
    left: 55%;
    right: 25%;
  }
`;

export const NavigationBar = function () {
  const [modalShow, setModalShow] = useState(false);
  return <Styles>
    <Navbar expand="lg" fixed ="top">
      <Navbar.Brand href="/">Decade3</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Form className="form-center">
        <FormControl type="text" placeholder="Search" className="" />
      </Form>
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
          <Button variant="primary" onClick={() => setModalShow(true)} >Run Sims</Button>{' '}
          <Nav.Item>
            <Nav.Link href="/">Home</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="/about">About</Nav.Link>
          </Nav.Item>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

    <RunSimsModal show={modalShow} onHide={() => setModalShow(false)} />
  </Styles>
}

import React，{useState}来自“React”；
从“react bootstrap”导入{Nav，Navbar，Form，FormControl，Button}；
从“样式化组件”导入样式化；
从“/RunSimsModal”导入RunSimsModal；
const Styles=styled.div`
navbar先生{
背景色：#222；
}
A.
.导航栏导航，
.导航条灯.导航链接{
颜色：#9fffcb；
&：悬停{
颜色：白色；
}
}
.navbar品牌{
字号：1.4em；
颜色：#9fffcb；
&：悬停{
颜色：白色；
}
}
.表格中心{
位置：绝对！重要；
左：55%；
右：25%；
}
`;
导出常量NavigationBar=函数（）{
const[modalShow，setModalShow]=useState（false）；
返回
十进位
setModalShow（true）}>运行模拟人生{''}
家
关于
setModalShow（false）}/>
}

RunSimsModal.js

import React, { useState} from "react";
import { Button, Modal, FormFile, Form } from "react-bootstrap";
import * as outrightSimulatorApi from "../api/outrightSimulatorApi";
import Body from "../api/model/body.json";
import { withRouter } from "react-router-dom";

function RunSimsModal({ staticContext, ...props }) {
  const [numberofSims, setNumberOfSims] = useState("");
  const [simName, setSimName] = useState("");

  const runSims = event => {
    console.log("triggered");
    outrightSimulatorApi.runSim(
      Body.clientId,
      simName,
      numberofSims,
      Body.teamRatings, //This is the data I want to pass in from the Ratings page, it's an array
      Body.fixtureOverrides,
      Body.tournamentId
    );
    props.history.push("/reports");
  };

  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Run Simulations
        </Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <h4>Run Sims</h4>

        <Form onSubmit={runSims}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Number Of Simulations</Form.Label>
            <Form.Control
              required
              type="text"
              placeholder="Enter number of sims"
              value={numberofSims}
              onChange={e => setNumberOfSims(e.target.value)}
            />
          </Form.Group>

          <Form.Group controlId="formBasicEmail">
            <Form.Label>Simulation Name</Form.Label>
            <Form.Control
              required
              type="text"
              placeholder="Enter simulation name"
              value={simName}
              onChange={e => setSimName(e.target.value)}
            />
          </Form.Group>

          <Form.Group controlId="formBasicEmail">
            <Form.Label>Tournament Type</Form.Label>
            <Form.Control as="select">
              <option>LEAGUE</option>
            </Form.Control>
          </Form.Group>

          <Form.Group controlId="formBasicEmail">
            <Form.Label>Teams in tournament</Form.Label>
            <FormFile.Input />
          </Form.Group>

          <Button type="submit">Run</Button>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

export default withRouter(RunSimsModal);

import React，{useState}来自“React”；
从“react bootstrap”导入{Button，Modal，FormFile，Form}；
从“./api/OutlethSimulatorAPI”导入*作为OutlethSimulatorAPI；
从“./api/model/Body.json”导入正文；
从“react router dom”导入{withRouter}；
函数RunSimsModal（{staticContext，…props}）{
常量[numberofSims，setNumberOfSims]=使用状态（“”）；
const[simName，setSimName]=useState（“”）；
const runSims=事件=>{
控制台日志（“已触发”）；
完全仿真器api.runSim(
Body.clientId，
simName，
numberofSims，
Body.teamRatings，//这是我想从Ratings页面传入的数据，它是一个数组
Body.fixtureOverrides，
身体
);
props.history.push（“/reports”）；
};
返回(
运行模拟
模拟人生
模拟次数
setNumberOfSims（e.target.value）}
/>
模拟名称
setSimName（e.target.value）}
/>
锦标赛类型
联盟
锦标赛中的球队
跑
接近
);
}
使用路由器导出默认值（RUNSIMMODAL）；

Ratings.js

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { Table } from "react-bootstrap";
import NumericInput from "react-numeric-input";
import Teams from "../assets/Teams.js";
import { loadRatings } from "../actions/outrightSimulatorActions";
import ratingsStore from "../stores/ratingsStore";

const GridWrapper = styled.div`
  display: grid;
  grid-gap: 10px;
  margin-top: 4.5em;
  margin-left: 6em;
  margin-right: 6em;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: minmax(25px, auto);
`;

const TeamIcon = styled.span`
  margin-right: 0.5em;
`;

const teams = Teams;

function Display() {
  return (
    <GridWrapper>
      <div>
        <RatingsGrid />
      </div>
    </GridWrapper>
  );
}

function RatingsGrid() {
  const [ratings, setRatings] = useState(ratingsStore.getRatings());

  useEffect(() => {
    ratingsStore.addChangeListener(onChange);

    if (ratingsStore.getRatings().length === 0) loadRatings();

    return () => {
      ratingsStore.removeChangeListener(onChange);
    };
  }, []);

  function onChange() {
    console.log("ratings changed");
    setRatings(ratingsStore.getRatings());
  }

  return (
    <Table striped bordered hover size="sm">
      <thead>
        <tr>
          <th>Teams</th>
          <th>Ratings</th>
          <th>Home Advantage</th>
        </tr>
      </thead>
      <tbody>
        {ratings.map(rating => (
          <tr key={rating.teamId}>
            <td>
              <TeamIcon>
                <span>
                  <img
                    src={teams.find(t => t.id === rating.teamId).icon}
                    className="icon"
                    height="42"
                    width="42"
                    alt={rating.teamName}
                  />
                </span>
                {rating.teamName}
              </TeamIcon>
            </td>
            <td>
              <NumericInput
                value={rating.rating}
                step={0.01}
                mobile={false}
                size="14"
              />
            </td>
            <td>
              <NumericInput value={0.4} step={0.01} mobile={false} size="14" />
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export default Display;

import React，{useState，useffect}来自“React”；
从“样式化组件”导入样式化；
从“react bootstrap”导入{Table}；
从“反应数值输入”导入数值输入；
从“./assets/Teams.js”导入团队；
从“./actions/outlethSimulatorActions”导入{loadRatings}；
从“./stores/ratingsStore”导入评级存储；
const GridWrapper=styled.div`
显示：网格；
栅隙：10px；
边缘顶部：4.5em；
左侧边缘：6em；
右边距：6em；
网格模板列：重复（1，1fr）；
网格自动行：最小最大值（25px，自动）；
`;
const TeamIcon=styled.span`
右边距：0.5em；
`;
const团队=团队；
函数显示（）{
返回(
);
}
函数分级网格（）{
const[ratings，setRatings]=useState（ratingsStore.getRatings（））；
useffect（（）=>{
ratingsStore.addChangeListener（onChange）；
如果（ratingsStore.getRatings（）.length==0）loadRatings（）；
return（）=>{
ratingsStore.removeChangeListener（onChange）；
};
}, []);
函数onChange（）{
控制台日志（“评级更改”）；
setRatings（ratingsStore.getRatings（））；
}
返回(
团队
评级
主场优势
{ratings.map（rating=>(
t、 id==rating.teamId）.icon}
className=“图标”
高度=“42”
宽度=“42”
alt={rating.teamName}
/>
{rating.teamName}
))}
);
}
导出默认显示；

有帮助吗？@DrewReese谢谢，我也在使用Flux框架，因此我不确定在编辑

评级

页面上的输入时是否也必须更改存储区…有帮助吗？@DrewReese谢谢，我还使用了Flux框架，因此我不确定在编辑

评级

页面上的输入时是否也必须更改存储。。。