反应值返回未定义

Question

我试图从我的反应组件中的输入字段中获取特定值，但它返回未定义，我尝试单独使用 userref 但它给了我相同的结果（返回未定义，请参见下图。我需要获取我可以使用他们的唯一 ID 作为 API 调用的一部分，但不会列出所有玩家，但我确实有一个包含这两者的 JSON 文件，因此如果我可以从我创建的输入中获取他们的名字，我就可以获取他们的 ID 并添加任何人都可以协助我执行 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的表单控件就像任何常规＆lt; input＆gt;一样，并且可以受控。您无需使用参考，仅指出

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>

＆lt; formControl＆gt;现在是一个受控组件，这意味着其值是从状态驱动的，并且使用 canse 事件到更新该状态。

现在，您只需在任何按钮事件处理程序或效果钩中参考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

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