Javascript 如何调用另一页上的按钮值？

我是Reactjs的新手，我遇到了这个问题，我在第1页做了一个输入函数，我在第二页输入一个数值，我在第二页调用这个函数，在第二页调用这个函数，我还定义了paypal参数：

第一页的功能输入：

function ButtonBID() {
  return (
    <>
      <div class="form__group field">
        <input
          type="input"
          class="form__field"
          placeholder="Name"
          name="bid"
          id="name"
          required
        />
        <label for="name" class="form__label">
          Bid now!
        </label>
      </div>
    </>
  );
}

函数按钮ID（）{
返回(
现在出价！
);
}

然后在第二页调用此函数：

import React, { useRef, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Navbar from '../../Components/Navbar/Navbar'
import Video from '../../Asssets/Video/Video.mp4'
import Table from '../../Components/Table/Table'
import styled from 'styled-components'
import { FirstPositionButton, ButtonBID } from '../../Components/Buttons/Button/Button'

function RankingHome() {

  const paypal = useRef()

  useEffect(() => {
    window.paypal.Buttons({
      createOrder: (data, actions, err) => {
        return actions.order.create({
          intent: "CAPTURE",
          purchase_units: [{
            description: 'Cool looking table',
            amount: {
              currency_code: "EUR",
              value: //**** i would to call the input value here ***//
                    }
          }]
        })
      },
      onApprove: async (data, actions) => {
        const order = await actions.order.capture()
        console.log(order)
      },
      onError: (err) => {
        console.log(err)
      }
    }).render(paypal.current)
  }, [])
  return (
    <>
      <Navbar />
      <HeroContainer>
        <HeroBg>
          <VideoBg src={Video} type="video/mp4" autoPlay loop muted playsInline />
        </HeroBg>
        <HeroContent>
          <HeroItems>
            <HeroH1>Who will win?</HeroH1>
            <Table />
            <div className="flexati">
              <FirstPositionButton />
              <ButtonBID />
              <Link to='/Pay'>
                <i class="far fa-check onClick={paypal}"></i>
                <div ref={paypal}></div>
              </Link>
            </div>
          </HeroItems>
        </HeroContent>
      </HeroContainer>
    </>
  )
}

export default RankingHome

import React，{useRef，useffect}来自“React”
从“react router dom”导入{Link}
从“../../Components/Navbar/Navbar”导入Navbar
从“../../Asssets/Video/Video.mp4”导入视频
从“../../Components/Table/Table”导入表
从“样式化组件”导入样式化
从“../../Components/Buttons/Button/Button”导入{FirstPositionButton，ButtonBID}
函数RankingHome（）{
const paypal=useRef（）
useffect（（）=>{
window.paypal.Buttons({
createOrder：（数据、操作、错误）=>{
return actions.order.create({
意图：“捕获”，
购买单位：[{
描述：“酷炫的桌子”，
金额：{
货币代码：“欧元”，
value://****我想在这里调用输入值***//
}
}]
})
},
onApprove:async（数据、操作）=>{
const order=wait actions.order.capture（）
console.log（订单）
},
onError：（err）=>{
console.log（错误）
}
}).render（paypal.current）
}, [])
返回(
谁会赢？
)
}
导出默认RankingHome

---

我想能够采取的'文本框'的价值，并最终通过它作为贝宝'金额'内的参数，谢谢

在

RankingHome

组件中，您应该声明一个状态来存储textbox的输入值

import React, { useState } from 'react';

function RankingHome() {
  const [textValue, setTextValue] = useState("");

  useEffect(() => {
    window.paypal.Buttons({
      createOrder: (data, actions, err) => {
        return actions.order.create({
          intent: "CAPTURE",
          purchase_units: [{
            description: 'Cool looking table',
            amount: {
              currency_code: "EUR",
              value: //**** i would to call the input value here ***//
                        }
          }]
        })
      },
      onApprove: async (data, actions) => {
        const order = await actions.order.capture()
        console.log(order)
      },
      onError: (err) => {
        console.log(err)
      }
    }).render(paypal.current)
  }, [])

  // Your code continues here
  // To the place <ButtonBID /> has been called and edit it this way.
  <ButtonBID text={textValue} setText={setTextValue} />
  // Your code continues here.
}

function ButtonBID(props) {
  return (
    <>
      <div class="form__group field">
        <input
          value={props.text}
          onChange={props.setText}
          type="input"
          className="form__field"
          placeholder="Name"
          name="bid"
          id="name"
          required
        />
        <label for="name" class="form__label">
          Bid now!
        </label>
      </div>
    </>
  );
}

export default ButtonBID;