Html 在 React (NEXT) 中，当我try 进行动态补充时，我无法使用实例this来引用输入

这就是代码 当我try 创建动态补全时，我不能使用实例‘This’(风险输入)来引用输入(Win输入).

import React,{ useState } from "react";

function rowbet() {
   const [risk, setRisk] = useState('0');
   const [win, setWin] = 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>
  <input  value={risk} onChange={()=>{setRisk(this.value)}} 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>
  <input value={risk*1.5 } type="number" name="win" id="win" dir="rtl" className='w-full h-4 border-0 outline-none' />
  </div>
 </div>
 </div>
 </div>
  )
}

export default rowbet

ERROR 个

我试着用像这样的东西

获取输入的值并用于更新其他输入的值