React(Next.js)函数组件中无法使用this引用输入框问题求助

核心问题分析 #

1. 函数组件不能用this：你写的是函数组件，不存在类组件的实例上下文，this.value会直接抛出Cannot read properties of undefined (reading 'value')错误。
2. 状态类型不统一：初始risk设为字符串'0'，虽然JavaScript会隐式转换，但直接参与计算可能引发潜在问题，建议统一用数值类型。

修复后的代码 #

import React, { useState } from "react";

function rowbet() {
  // 初始值改为数值0，统一类型
  const [risk, setRisk] = useState(0);

  return (
    <div>
      <div className='w-full h-0.5 bg-gray-200'></div>   
      <div className='p-1'>
        <div className='flex flex-row w-full text-justify'>
          <div className='w-5/6 '> <p className='font-sans'> Under 2.5, 3</p> </div> 
          <div className='font-sans text-right'> -150</div>
        </div>
        <div className='font-sans text-sm text-justify'><p>Total</p></div>
        <div className='text-justify '>
          <a href="#"><p className='font-sans text-sm text-blue-400 hover:text-red-600'>Eintracht Frankfurt vs Napoli</p></a>
          <p className='font-sans text-xs text-gray-400'>2/21/23, 3:00 PM</p>
        </div>
        <div className='flex flex-row w-full pt-1 '> 
          <div className='w-6/12 h-10 mr-2 border-2 rounded-md focus:text-xs'> 
            <p className='ml-1 text-xs text-justify text-gray-300'>Risk:</p>
            {/* 修正onChange：接收event参数，取target.value并转成数值 */}
            <input  
              value={risk} 
              onChange={(e) => setRisk(Number(e.target.value) || 0)} 
              type="number" 
              name="risk" 
              id="risk" 
              dir="rtl"  
              className='w-full h-4 border-0 outline-none' 
            />
          </div>
          <div className='w-6/12 h-10 border-2 rounded-md focus:text-xs'> 
            <p className='ml-1 text-xs text-justify text-gray-300'>Win:</p>
            {/* 基于risk计算Win值，保留合理小数位 */}
            <input 
              value={(risk * 1.5).toFixed(2)} 
              type="number" 
              name="win" 
              id="win" 
              dir="rtl" 
              className='w-full h-4 border-0 outline-none' 
              readOnly {/* 如果不需要用户编辑Win，加上只读属性 */}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default rowbet

关键修改说明 #

• onChange事件修复：通过(e) => setRisk(Number(e.target.value) || 0)获取输入值，转成数值后更新状态，同时处理输入为空的情况（默认设为0）。
• 状态类型统一：把useState('0')改成useState(0)，确保数值计算的准确性。
• Win值计算优化：用toFixed(2)保留两位小数，符合金额类输入的常规需求；如果不需要用户手动修改Win值，加上readOnly属性防止误编辑。

内容的提问来源于stack exchange，提问作者Mario FullParty