onChange 在通过状态更新更改值时在反应功能组件中不起作用

Question

我在项目中使用 mapbox，这里我试图从输入框中获取纬度和经度。我在输入字段中设置了一个值，我想在写入时更改它，但在尝试写入内容时输入框中没有任何更改。

请检查代码

 const [marker, setMarker] = useState({
    latitude: 20.2961,
    longitude: 85.8245
  });

这是渲染输入。

           <div className='flex gap-6'>
                <div className='relative w-1/2'>
                  <input onChange={(e) => setMarker({latitude:e.target.value, ...marker})}  value={marker.latitude} type="number" placeholder='Latitude' className='py-4 w-full pl-12 text-xs rounded-md focus:outline-none border border-bottom-border' name="" id="" />
                  <MapPin className='absolute top-1/2 -translate-y-1/2 left-2 bg-[#0000000d] p-2 rounded text-gray-500' size={30} weight="bold" />
                </div>
                <div className='relative w-1/2'>
                  <input onChange={(e) => setMarker({longitude:e.target.value, ...marker})} value={marker.longitude} type="number" placeholder='Longitude' className='py-4 w-full pl-12 text-xs rounded-md focus:outline-none border border-bottom-border' name="" id="" />
                  <MapPin className='absolute top-1/2 -translate-y-1/2 left-2 bg-[#0000000d] p-2 rounded text-gray-500' size={30} weight="bold" />
                </div>
              </div>

知道解决方法的请帮忙

Answer 1

这里应该首先使用展开运算符。使用类似这样的东西

onChange={(e) => setMarker({...marker, latitude:e.target.value })}

onChange 在通过状态更新更改值时在反应功能组件中不起作用

onChange is not working in react functional component while changing the value through state update

input

reactjs

react-functional-component