javascript 对象字段输入值 [object Object] 而不是字符串 Reactjs答案

【问题标题】：javascript object field input value [object Object] instead of string Reactjsjavascript 对象字段输入值 [object Object] 而不是字符串 Reactjs
【发布时间】：2021-04-05 04:22:52
【问题描述】：

我是新来的，我遇到了一个疑问，我创建了一个输入按钮，我可以在其中输入我的值，但不幸的是它只传递了这个值 [object object]

这是我的截图：

我的输入功能：

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 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 的值，我该如何解决这个问题？谢谢！！

【问题讨论】：

您是否尝试过不直接传递 setTextValue，而是传递调用 setTextValue 的函数？如果是不同的组件，则不能直接设置其他组件的状态

标签： javascript html node.js reactjs

【解决方案1】：

onChange 回调具有事件参数，您可以从中获取更改的文本。

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

【讨论】：

【解决方案2】：

我看到你的错误是你没有收到数组中的数据对象

你可以这样做

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

【讨论】：