React JS 创建百分比图表

如何解决React JS 创建百分比图表

我正在创建一个图表，该图表将显示用户输入数字的设定百分比。例如，用户输入“200”，图表将显示“100% = 200、95% = 190 等”。图表上的百分比将保持不变，只是输入数字和百分比结果会发生变化。希望这是有道理的。

这是图表的代码：

import React,{ useState } from 'react';

const issstyles = {
    chart: {
        display: 'flex',flexDirection: 'row',margin: '20px',},percentBox: {
        background: '#E7E7E7',borderRadius: '10px',padding: '5px',display: 'flex',justifyContent: 'center',width: '200px',fontSize: '24px',percentResultBox: {
        background: '#E7E7E7',line: {
        padding: '5px',}

export default function PercentChart(props) {
    const [ percent ] = useState(props.percent)
    const [ percentResult ] = useState(props.percentResult)
    
    return (
        <div style={issstyles.chart}>
            <div style={issstyles.percentBox}>
                {percent}
            </div>
            <div style={issstyles.line}>
                ----------
            </div>
            <div style={issstyles.percentResultBox}>
                {percentResult}
            </div>
        </div>
    )
};

这是调用它的页面的代码：

import React from 'react';
import HeaderButton from '../../components/HeaderButton';
import PercentChart from '../../components/PercentChart';

const issstyles = {
    PRNumber: {
        display: 'flex',alignItems: 'center',fontFamily: 'PT Sans Caption',fontSize: '18px',Space: {
        margin: '10px',PRChart: {
        background: '#C4C4C4',width: '80%',flexDirection: 'column',margin: '0 auto',};

export default function PercentPage() {
    return (
        <div>
            <HeaderButton exerciseName="Movement 1" />
            <div style={issstyles.PRNumber}>
                PR:
                <input type="number" placeholder="Enter current PR" style={issstyles.Space}/>
            </div>
            <div style={issstyles.PRChart}>
                <PercentChart percent="100%" percentResult="100"/>
                <PercentChart percent="95%" percentResult="95"/>
                <PercentChart percent="90%" percentResult="90"/>
                <PercentChart percent="85%" percentResult="85"/>
                <PercentChart percent="80%" percentResult="80"/>
                <PercentChart percent="75%" percentResult="75"/>
                <PercentChart percent="70%" percentResult="70"/>
                <PercentChart percent="65%" percentResult="65"/>
                <PercentChart percent="60%" percentResult="60"/>
                <PercentChart percent="55%" percentResult="55"/>
            </div>
        </div>  
    );
};

这是页面当前外观的屏幕截图：

基本上，我想要发生的是用户将在“输入当前 PR”输入字段中输入一个数字，图表右侧的数字将自动更新为该数字的相应百分比。我现在知道我的数字是硬编码的，根本与输入字段无关，这就是我主要需要帮助的地方。我是编码新手，所以任何额外的提示/更正都会很棒。谢谢！

解决方法

可运行代码片段

const { useEffect,useState } = React;
const { Container,Table,Form } = ReactBootstrap;

function App() {
  const [pr,setPr] = useState(100);
  const [levels,setLevels] = useState([]);

  useEffect(() => {
    const arr = [];
    let percentage = 100;
    while (percentage > 0) {
      arr.push([percentage,(pr * percentage) / 100]);
      percentage -= 5;
    }
    setLevels(arr);
  },[pr]);

  return (
    <Container>
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>PR</Form.Label>
          <Form.Control
            type="input"
            placeholder="100"
            value={pr}
            onChange={(e) => setPr(e.target.value)}
          />
        </Form.Group>
      </Form>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Percent</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          {levels.map((level) => (
            <tr key={level[0]}>
              <td>{level[0]}%</td>
              <td>{level[1]}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Container>
  );
}


// Render it
ReactDOM.render(
  <App />,document.getElementById("react")
);

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="react"></div>

修改代码段前的示例代码

import React,{ useEffect,useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Table from "react-bootstrap/Table";
import Form from "react-bootstrap/Form";

export default function App() {
  const [pr,[pr]);

  return (
    <Container>
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>PR</Form.Label>
          <Form.Control
            type="input"
            placeholder="100"
            value={pr}
            onChange={(e) => setPr(e.target.value)}
          />
        </Form.Group>
      </Form>   
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Percent</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          {levels.map((level) => (
            <tr key={level[0]}>
              <td>{level[0]}%</td>
              <td>{level[1]}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Container>
  );
}

我使用 React Bootstrap 进行格式化。这个想法是你有一个表单字段供用户输入一个数字。当它发生变化时，onEffect 会触发并解析输入。然后它计算百分比并将它们放在一个数组中。数组被设置为“级别”，我们使用 map 方法来渲染表格。