我正在构建经纪人模拟器，我需要根据我选择的选项获得不同的货币。我也不确定是否需要在模式对话框中使用窗体来发送关于不同选项卡中订单的最终信息。

import React, {useState} from "react";
import './select.css'
import Modal from "../popup/modal"
import { useEffect } from "react";

const Select = () => {

    
    const [value, setValue] = useState("");

    const [usdrub, setUsdrub] = useState(Math.random() * (64-61) + 61);
    useEffect(() => {
      const interval = setInterval(() => {
        setUsdrub(Math.random() * (64-61) + 61);
      }, 10000);
      return () => clearInterval(interval);
    }, [])

    const [rubusd, setRubusd] = useState(Math.random() * 2);
    useEffect(() => {
      const interval = setInterval(() => {
        setRubusd(Math.random() * 2);
      }, 10000);
      return () => clearInterval(interval);
    }, [])


    function changeSelect() {
        setValue(value)
    }
    const [modalActive, setModalActive] = useState(false)


    return (
        <div>
        <select onChange={changeSelect}>
        <option name="USD/RUB" value={usdrub}>USD/RUB</option>
        <option name="RUB/USD" value={rubusd}>RUB/USD</option>
        </select>
        <div className="Curr">
          <div className="Buy" name="buy"> <button className="Buy" type="btn" onClick={() => setModalActive(true)}>BUY {value + 1} </button>
          </div>
          <div className="Sell" name="sell"><button className="Sell" type="btn"  onClick={() => setModalActive(true)}>SELL {value}</button></div>
          </div>
          <Modal active={modalActive} setActive={setModalActive} price={usdrub + 1}/>
        </div>
        
    )
}

export default Select

尝试了不同的值导入，但都不起作用。我要么没有得到值（在模态对话框中我得到了，但它不会根据选项而改变），要么只有一个选项的值
UPD经过一些修正我有这个

import React, {useState} from "react";
import './select.css'
import Modalbuy from "../popup/Modalbuy"
import Modalsell from "../popup/Modalsell"
import { useEffect } from "react";

const Select = () => {

    
    const [value, setValue] = useState("");

    const [usdrub, setUsdrub] = useState(Math.random() * (64-61) + 61);
    useEffect(() => {
      const interval = setInterval(() => {
        setUsdrub(Math.random() * (64-61) + 61);
      }, 10000);
      return () => clearInterval(interval);
    }, [])

    const [rubusd, setRubusd] = useState(Math.random() * 2);
    useEffect(() => {
      const interval = setInterval(() => {
        setRubusd(Math.random() * 2);
      }, 10000);
      return () => clearInterval(interval);
    }, [])


    function changeSelect(event) {
        setValue(event.target.value)
    }
    const [modalBuyActive, setModalBuyActive] = useState(false)
    const [modalSellActive, setModalSellActive] = useState(false)


    return (
        <div>
        <select value = {value} onChange={changeSelect}>
        <option selected></option>
        <option name="USD/RUB" value={usdrub}>USD/RUB</option>
        <option name="RUB/USD" value={rubusd}>RUB/USD</option>
        </select>
        <div className="Curr">
          <div className="Buy" name="buy"> <button className="Buy" type="btn" onClick={() => setModalBuyActive(true)}>BUY {value + 1} </button>
          </div>
          <div className="Sell" name="sell"><button className="Sell" type="btn"  onClick={() => setModalSellActive(true)}>SELL {value}</button></div>
          </div>
          <Modalbuy active={modalBuyActive} setActive={setModalBuyActive} price={value + 1}/>
          <Modalsell active={modalSellActive} setActive={setModalSellActive} price={value}/>
        </div>
        
    )
}

export default Select

Modalbuy.js

import React from "react";
import "./modal.css";

const Modalbuy = ({active, setActive,price}) => {
  
    return (
        <div className={active ? "modal active" : "modal"} onClick={() => setActive(false)}>
          <div className="modal__content" onClick={e => e.stopPropagation()}>
            <header>Make order</header>
            <p>BUY {price}</p>
            <input placeholder="Volume"></input>
            <div>
              <button>Ok</button>
              <button>Cancel</button>
            </div>

          </div>
        </div>
    )
}

export default Modalbuy;

Modalsell.js

import React from "react";
import "./modal.css";

const Modalsell = ({active, setActive,price}) => {
    return (
        <div className={active ? "modal active" : "modal"} onClick={() => setActive(false)}>
          <div className="modal__content" onClick={e => e.stopPropagation()}>
            <header>Make order</header>
            <p>SELL {price}</p>
            <input placeholder="Volume"></input>
            <div>
              <button>Ok</button>
              <button>Cancel</button>
            </div>

          </div>
        </div>
    )
}

export default Modalsell;

Timer.js

import React from 'react';
import {useState, useEffect} from 'react'

const Timer = () => {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  

  
    return (      
      <div className="clock">
        {time}      
      </div>
    );
  };

  export default Timer;

Trading.js

import React from "react";
import Timer from "./Timer";
import Select from "./select_curr/Select";

const Trading = () => {
    return (
        <div>
        <Timer/>
        <Select/>
        </div>
    )
}

export default Trading;

App.js

import './App.css';
import Page from './components/page/page'

function App() {
  return (
    <div className="App">
      <Page/>

    </div>
  );
}

export default App;