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 })}