时间戳

首页 > 解决方案 > 更新对象的多个按钮

reactjs - 更新对象的多个按钮

问题描述

我有一个状态，我需要更新嵌套对象中的多个按钮，然后使用 dispatch for redux 来更新商店，但仍然没有找到一个好的解决方案：

我有以下接口，我想按照其结构发送数据：

interface Object {
        name: string;
        buttons: {
          button1: number;
          button2: number;
          button3: number;
          button4: number;
      };
}

所以我想避免我的状态更新状态是这样的解决方案：

  const [name, setName] = useState("");
  const [button1, setButton1] = useState(0);
  const [button1, setButton1] = useState(0);
  const [button1, setButton1] = useState(0);
  const [button1, setButton1] = useState(0);

我想提交我的表单，我会遇到这样的状态：

const [object, setObject] = useState({
      name: "";
      buttons: {
        button1: 0;
        button2: 0;
        button3: 0;
        button4: 0;
  };
})

function submit() {
  dispatch( {
      name: "";
      buttons: {
        button1: 3;
        button2: 6;
        button3: 8;
        button4: 4;

}) }

所以当我尝试增加和减少我的按钮时，我通常会这样做，我想避免：

// increment
 onClick={() => setButton1(button1 + 1)}

// decrement
 onClick={() => setButton1(button1 - 1)}

那么有没有更好的解决方案呢？

标签： reactjstypescript

解决方案

完整示例

import React, { useState } from "react";

export default function App() {
  const [buttons, setButtons] = useState([0, 0, 0, 0])

  const handleClick = (event) => {
    const key = event.target.name

    // Copy state
    const newButtons = [...buttons]
    // Update state
    newButtons[key] += 1
    // Submit state
    setButtons(newButtons)
    console.log(buttons)
  }

  return (
    <div>
      <button name="1" onClick={handleClick}>1 Button</button>
    </div>
  );
}

PS。如果你想完全克隆嵌套对象，你需要创建 cloneObject func 或使用 Immer 库，来自 lodash 的 clone(cloneDeep) func

具有名称属性的完整示例

import React, { useState } from "react";
import cloneDeep from "lodash.clone"

export default function App() {
  const [state, setState] = useState({
    name: "",
    buttons: [0, 0, 0, 0]
  })

  const handleClick = (event) => {
    const key = event.target.name

    // Copy state
    const newState = cloneDeep(state)
    // Update state
    newState.buttons[key] += 1
    // Submit state
    setState(newState)
    console.log(state)
  }

  return (
    <div>
      <button name="1" onClick={handleClick}>1 Button</button>
    </div>
  );
}

推荐阅读