Reactjs 创建百分比图表

我正在创建一个图表，显示用户输入数字的设定百分比。例如，用户输入“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',
        borderRadius: '10px',
        padding: '5px',
        display: 'flex',
        justifyContent: 'center',
        width: '200px',
        fontSize: '24px',
    },
    line: {
        padding: '5px',
        justifyContent: 'center',
        fontSize: '24px',
    },
}

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，{useState}来自“React”；
常量ISSTYLES={
图表：{
显示：“flex”，
flexDirection:'行'，
保证金：“20px”，
},
百分比框：{
背景：“#E7E7E7”，
边界半径：“10px”，
填充：“5px”，
显示：“flex”，
为内容辩护：“中心”，
宽度：“200px”，
fontSize:'24px'，
},
百分比结果框：{
背景：“#E7E7E7”，
边界半径：“10px”，
填充：“5px”，
显示：“flex”，
为内容辩护：“中心”，
宽度：“200px”，
fontSize:'24px'，
},
行：{
填充：“5px”，
为内容辩护：“中心”，
fontSize:'24px'，
},
}
导出默认功能百分比图（道具）{
常量[百分比]=使用状态（道具百分比）
常量[percentResult]=useState（props.percentResult）
返回(
{percent}
----------
{percentResult}
)
};

以下是调用它的页面的代码：

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

const issStyles = {
    PRNumber: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '20px',
        fontFamily: 'PT Sans Caption',
        fontSize: '18px',
    },
    Space: {
        margin: '10px',
    },
    PRChart: {
        background: '#C4C4C4',
        width: '80%',
        borderRadius: '10px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        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>  
    );
};

从“React”导入React；
从“../../components/HeaderButton”导入HeaderButton；
从“../../components/PercentChart”导入百分比图表；
常量ISSTYLES={
PRN编号：{
显示：“flex”，
为内容辩护：“中心”，
对齐项目：“居中”，
保证金：“20px”，
fontFamily:'PT Sans Caption'，
fontSize:'18px'，
},
空间：{
保证金：“10px”，
},
PRChart：{
背景：“#C4C4”，
宽度：“80%”，
边界半径：“10px”，
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
边距：“0自动”，
},
};
导出默认函数PercentPage（）{
返回(
公共关系：
);
};

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

---

基本上，我希望用户在“输入当前PR”输入字段中输入一个数字，图表右侧的数字将自动更新为该数字的相应百分比。我知道现在我有硬编码的数字，与输入字段没有任何关联，这就是我主要需要帮助的地方。我对编码还不熟悉，所以任何额外的提示/更正都会很好。谢谢大家!

可运行代码段

const{useffect，useState}=React；
const{Container，Table，Form}=ReactBootstrap；
函数App（）{
const[pr，setPr]=useState（100）；
const[levels，setLevels]=useState（[]）；
useffect（（）=>{
常数arr=[]；
百分比=100；
而（百分比>0）{
arr.push（[百分比，（pr*百分比）/100]）；
百分比-=5；
}
设定水平（arr）；
}，[pr]）；
返回(
公共关系
setPr（e.target.value）}
/>
百分比
结果
{levels.map（（level）=>(
{level[0]}%
{level[1]}
))}
);
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);