Question

我想用功能组件中的单个更改处理程序用表单中的几个值更新状态。我无法弄清楚如何以适当的方式在状态中设置单个属性。我已经在类组件中看到了这个作品。

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

export function Example(){
  const [user, setUser] = useState({nickname: '', age: 0})

  const handleChange = event => {
    const { name, value } = event.target
    setUser({ [name]: value })
  }

  return(
     <form>
       <input name="nickname" onChange={handleChange} />
       <input name="age" onChange={handleChange} />
       <button onClick={(e) => {
         e.preventDefault()
         console.log(user)
        }}>Show User</button>
     </form>
  )
}

ReactDOM.render(
    <Example />,
    document.getElementById('app')
);

上面的代码无法按我想要的方式工作，因为它总是覆盖整个状态，而不仅仅是覆盖相应的属性。

我收到：

Object {age: "24"}
Object {nickname: "Lala"}

我想要：

Object {age: "24", nickname: "Lala"}

实现此目标的最佳做法是什么？

Answer 1

尝试通过这种方式做到这一点：

uses
  Windows;

var
  si: TScrollInfo;
begin
  si.cbSize := sizeof(si);
  si.fMask := SIF_POS;
  if GetScrollInfo(ImgView1.Handle, SB_VERT, si) then
  begin
    // use si.nPos as needed...
  end;
end;

Answer 2

实际上，您非常接近下一行中的解决方案

  setUser({ [name]: value })

但是您需要确保此输入不会触及的旧值的持久性，因此您需要将其更改为

  setUser({ ...user, [name]: value })

如何在React状态下更新单个属性（功能组件）

2 个答案: