Question

当点击按钮时，如何将 foo2 更改为 e.target.value，而不影响其他对象？

import React from 'react'

export const App = () => {
  const [state, setState] = useState({
    foo1: "12", foo2: 2, foo3: null
  })
  return (
    <div>
      <input type="button" value="" onClick={(e) => setState()}/>
    </div>
  )
}

Answer 1

使用spread operator

setState({ ...state, foo2: e.target.value })

Answer 2

如果“其他对象”是指状态对象中的其他值，那么您可以使用 Javascript 的扩展运算符 setState({ ...state, foo2: 1 }); 作为替代方案，如果单个值在逻辑上不一致，您也可以使用单独的 useState 挂钩。但是，您可能不关心额外的样板文件。

Answer 3

您可以为按钮添加一个 name 属性，并使用它通过扩展原始状态并使用 [target.name] 覆盖属性 target.value 来更新状态：

const { useState } = React

const App = () => {
  const [state, setState] = useState({
    foo1: "12", foo2: 2, foo3: null
  })
  
  const update = ({ target }) => {
    setState(s => ({ ...s, [target.name]: target.value }))
  }
  
  console.log(state)
  
  return (
    <div>
      <button type="button" name="foo1" value="" onClick={update}>Foo 1</button>
      <button type="button" name="foo2" value="" onClick={update}>Foo 2</button>
      <button type="button" name="foo3" value="" onClick={update}>Foo 3</button>
    </div>
  )
}

ReactDOM.render(
  <App />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

如何在反应钩子中修改我选择的对象？

3 个答案: