反应值返回未定义

Question

我试图从我的反应组件中的输入字段中获取特定值，但它返回未定义，我尝试单独使用 useref 但它给了我相同的结果（returns 未定义，见下图。我需要获取玩家名称，我可以使用他们的唯一 ID 作为 API 调用的一部分，该调用未列出所有玩家，但我确实有一个包含两者的 JSON 文件，所以如果我可以从我创建的输入中获取他们的姓名，我可以获取他们的 ID 并将其添加到 API 以执行 API 调用。有人可以帮助我吗？谢谢！

import React from "react";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "../playercompare.css";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import axios from "axios";
import "chart.js/auto";
import { Bar } from "react-chartjs-2";
import { Radar } from "react-chartjs-2";
import getPlayerId from "../Players.js";
import { useState, useEffect, useRef } from "react";
import players from "../Players.js";

const Playercompare = () => {
  // let axiosurl= 'https://statsapi.web.nhl.com/api/v1/people/' +id;
  const playerOneInput = useRef(null);
  const playerTwoInput = useRef(null);
  const [playerOneName, setPlayerOneName] = useState("Choose player name");
  const [playerTwoName, setPlayerTwoName] = useState("Choose player name");

  function playerOneId() {
    let playerOne = setPlayerOneName(playerOneInput.current.textValue);
    console.log(playerOne);
    console.log(players);
    for (let i = 0; i < players.length; i++) {
      if (playerOneInput.current.value == players[i].name) {
      }
    }
  }

  return (
    <Row className="player-compare-row">
      <Col className="col-12 col-lg-4 input-container" id="input">
        <InputGroup className="mb-3 mt-4 input" ref={playerOneInput}>
          <FormControl
            placeholder={playerOneName}
            aria-label="Player Name"
            aria-describedby="basic-addon1"
          />
        </InputGroup>
        <div className="button col-3" onClick={playerOneId}>
          <p>Hello</p>
        </div>
      </Col>

      <Col className="col-12 col-lg-4 offset-lg-4  input-container">
        <InputGroup className="mb-3 mt-4 input" ref={playerTwoInput}>
          <FormControl
            placeholder={playerTwoName}
            aria-label="Player Name"
            aria-describedby="basic-addon1"
          />
        </InputGroup>
        <div className=""></div>
      </Col>
    </Row>
  );
};

export default Playercompare;

Answer 1

React-Bootstrap 的表单控件与任何常规 <input> 一样工作，并且可以是 controlled。您不需要使用 refs，只需声明

const [playerOneName, setPlayerOneName] = useState("");

// ...

<InputGroup className="mb-3 mt-4 input">
  <FormControl
    placeholder="Choose player name"
    aria-label="Player Name"
    aria-describedby="basic-addon1"
    value={playerOneName}
    onChange={e => setPlayerOneName(e.target.value)}
  />
</InputGroup>

<FormControl> 现在是一个受控组件，这意味着它的值由状态驱动，它使用 change 事件来更新该状态。

您现在可以在任何按钮事件处理程序或效果挂钩中简单地引用 playerOneName 等。

const handleClick = () => {
  console.log("You clicked the button");
  console.log("playerOneName:", playerOneName, "playerTwoName:", playerTwoName);
};

useEffect(() => {
  console.log("player name state changed");
  console.log("playerOneName:", playerOneName, "playerTwoName:", playerTwoName);
}, [ playerOneName, playerTwoName ]); // run effect when these change

这是一个超级简单的演示，展示了受控组件

反应值返回未定义

React value returning undefined

javascript

reactjs

react-hooks

use-state

use-ref