javascript object 字段輸入值 [object Object] 代替字符串 Reactjs

Question

我是新來的，我遇到了一個疑問，我創建了一個輸入按鈕，我可以在其中輸入我的值，但不幸的是它只傳遞了這個值 [object object]

這是我的截圖：

我的輸入 function：

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

我在哪里定義 function：

function RankingHome() {
  const [textValue, setTextValue] = useState('');
  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 text={textValue} setText={setTextValue} />
              <Link to="/Pay">
                <i class="far fa-check"></i>
              </Link>
            </div>
          </HeroItems>
        </HeroContent>
      </HeroContainer>
    </>
  );
}

export default RankingHome;

如您所見，我創建了一個常量，在其中傳遞了 text 和 setText 的值，我該如何解決這個問題？ 謝謝！！

Answer 1

onChange回調具有事件參數，您可以從中獲取更改的文本。

<input
  value={props.text}
  onChange={e => props.setText(e.target.value)}
  ...
/>

Answer 2

我看到你的錯誤是你沒有收到數組中的數據對象

你可以到這個

<input value={props.text} onChange={(e) => props.setText(e.target.value)}/>