如何在React函数组件中获取输入框文本值（Next.js环境）

嘿，这问题其实很简单，而且Next.js在这里完全没影响——因为你要解决的是React函数组件的基础交互问题，和框架本身无关～下面给你两种常用的实现方式：

方法1：用useState绑定输入框值（推荐用于需要实时获取值的场景） #

这种方式通过React状态来管理输入框的内容，好处是你在组件的任何地方都能拿到当前输入值，比如要做实时提示、输入校验的话特别方便：

首先在组件里添加一个状态来存储输入值，然后把input的value和onChange和这个状态绑定，最后在checkAnswer里直接用这个状态值就行：

import Layout from "components/Layout"
import { useState } from "react";

export async function getServerSideProps(context) {
  const res = await fetch(`${process.env.NEXT_API_URL}/kana-terms/all`)
  const data = await res.json()
  return {props: {data}}
}

export default function Hiragana(props) {
  const [remainingTerms, setRemainingTerms] = useState(props.data);
  // 新增：用于存储输入框的值
  const [inputValue, setInputValue] = useState("");

  // 修改checkAnswer，直接使用inputValue状态
  function checkAnswer(event) {
    if (event.key === "Enter") {
      console.log("输入的内容是：", inputValue);
      // 这里可以做你的校验逻辑，比如和正确答案对比
    }
  }

  return (
    <Layout>
      <h1>Hiragana</h1>
      <div className="bg-light border w-100">
        <h2>{remainingTerms[0]?.hiraganaText}</h2>
        {/* 修改input，绑定value和onChange */}
        <input 
          type="text" 
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyUp={checkAnswer}
        />
      </div>
    </Layout>
  )
}

注意：我给remainingTerms[0]加了可选链?.，防止数据还没加载或者数组为空时报错，这是个小优化～

方法2：直接从事件对象获取输入值（适合仅触发事件时需要值的场景） #

如果你的需求只是在按下回车时才需要输入值，那不用额外维护状态，直接从event.target里拿就行，更简洁：

import Layout from "components/Layout"
import { useState } from "react";

export async function getServerSideProps(context) {
  const res = await fetch(`${process.env.NEXT_API_URL}/kana-terms/all`)
  const data = await res.json()
  return {props: {data}}
}

// 修改checkAnswer，直接从event.target获取值
function checkAnswer(event) {
  if (event.key === "Enter") {
    const inputValue = event.target.value;
    console.log("输入的内容是：", inputValue);
    // 这里做你的逻辑
  }
}

export default function Hiragana(props) {
  const [remainingTerms, setRemainingTerms] = useState(props.data);

  return (
    <Layout>
      <h1>Hiragana</h1>
      <div className="bg-light border w-100">
        <h2>{remainingTerms[0]?.hiraganaText}</h2>
        {/* 这里直接传event就行，不用额外参数 */}
        <input type="text" onKeyUp={checkAnswer} />
      </div>
    </Layout>
  )
}

为什么Next.js没影响？ #

Next.js只是在React基础上做了服务端渲染、路由等增强，React函数组件的核心API（比如useState、事件处理）和纯React项目完全一致，所以你不用考虑框架差异，按React函数组件的写法来就行～

内容的提问来源于stack exchange，提问作者Blaine Lafreniere