11. React 中使用 useState Hook 更新数组和对象

当状态更新时,它会被完全覆盖。如果我们的状态是具有多个属性的对象,但您只想更改某个属性的值怎么办?例如,我们初始化描述框的状态,如下所示:

const [box, setBox] = useState({
   name: 'jiyik.com',
   bgColor: 'blue', // background color
   width: 400,
   height: 300
});

 如果您想更改背景颜色但保持其他内容不变

setBox({...box, bgColor: 'red'});

不要使用此代码:因为它会从状态中删除名称、宽度和高度。

setBox({bgColor: 'red'})

完整的小案例

我们要制作的演示展示了一个盒子和几个表单元素。您可以使用相应的输入/选择元素来更新框的名称、背景颜色、宽度或高度。

11. React 中使用 useState Hook 更新数组和对象_第1张图片

import { useState } from 'react';
import './App.css';

function App() {

   // 使用具有四个属性的对象初始化状态
  const [box, setBox] = useState({
    name: 'jiyik.com',
    bgColor: 'blue',
    width: 400,
    height: 100,
  });

  // 此函数将更新用户在名称字段中键入时将调用的框的名称
  const updateBoxName = (e) => {
    setBox({ ...box, name: e.target.value });
  };

  // 此函数将更新框的背景颜色,当用户更改选择元素时将调用它
  const updateBakcgroundColor = (e) => {
    setBox({ ...box, bgColor: e.target.value });
  };

  // 此函数将更新当用户更改宽度输入时将调用的框的宽度
  const updateBoxWidth = (e) => {
    setBox({ ...box, width: parseInt(e.target.value) });
  };

  // 此函数将更新当用户更改高度输入时将调用的框的高度
  const updateBoxHeight = (e) => {
    setBox({ ...box, height: parseInt(e.target.value) });
  };
   

  return (
    
{/* 这是盒子 */}

{box.name}

{/* 这是更改框的表单元素 */}

Change the Apparence of the Box:

Box Name:

Background Color:

Box Width:

Box Height:

); } export default App; }

你可能感兴趣的:(React学习记录,react.js,javascript,前端)