npm 如何在react.js中将多个状态函数收缩为一个

jaxagkaj 于 2022-11-14 发布在 React

关注(0)|答案(3)|浏览(105)

import React from "react";
import { AiOutlineArrowDown, AiOutlineArrowUp } from "react-icons/ai";
import { useState } from "react";

const Vote = () => {
  const [num, setnum] = useState(0);

  const numdown = () => {
    num != 0 ? setnum(num - 1) : setnum(num);
  };
  const numup = () => {
    num < 9 ? setnum(num + 1) : setnum(num);
  };
  const [num2, setnum2] = useState(0);

  const numdown2 = () => {
    num2 != 0 ? setnum2(num2 - 1) : setnum(num2);
  };
  const numup2 = () => {
    num2 < 9 ? setnum2(num2 + 1) : setnum2(num);
  };
  var value1 = (
    <>
      <AiOutlineArrowDown onClick={numdown} />
      {num}
      <AiOutlineArrowUp onClick={numup} />
    </>
  );
  var value2 = (
    <>
      <AiOutlineArrowDown onClick={numdown2} />
      {num2}
      <AiOutlineArrowUp onClick={numup2} />
    </>
  );

  return (
    <>
      {value1}
      {value2}
    </>
  );
};

export default Vote;

在这段代码中，我有一个代码模板来形成一个轮询区，其中有两个具有递增和递减功能的表决值。表决值位于0到9之间，如两个三元运算符函数中所解释的）。
如何将这段代码压缩成一个状态函数和同样工作的递增和递减函数？

npm

来源：https://stackoverflow.com/questions/73704590/how-to-shrink-multiple-state-function-into-one-in-react-js

3条答案

按热度按时间

6fe3ivhb1#

这是个好问题。基本上，你可以使用自定义钩子来处理所有重复的逻辑。
您可以在此处看到一个示例：https://codesandbox.io/s/affectionate-sunset-7c9lw6?file=/src/App.js
在本例中，它将使用一个钩子来处理数字numUp & numDown。

const useNumber = (baseNunber) => {
  const [state, setState] = React.useState(baseNunber || 0);

  const numUp = (sum = 1) => {
    setState((prev) => prev + sum);
  };

  const numDown = (dec = 1) => {
    setState((prev) => prev - dec);
  };

  return [state, numUp, numDown];
};

您甚至可以进一步定义处理UI的组件，类似于：

const NumberRow = ({ baseNumber }) => {
  const [num, numUp, numDown] = useNumber(baseNumber);

  return (
    <div>
      <button onClick={() => numDown()}>-</button>
      {num}
      <button onClick={() => numUp()}>+</button>
    </div>
  );
};

最后，在代码中使用挂钩和/或组件：

export default function App() {
  const [num1, num1Up, num1Down] = useNumber(0);
  const [num2, num2Up, num2Down] = useNumber(0);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => num1Down()}>-</button>
      {num1}
      <button onClick={() => num1Up()}>+</button>
      <br />
      <button onClick={() => num2Down()}>-</button>
      {num2}
      <button onClick={() => num2Up()}>+</button>
      <NumberRow baseNumber={0} />
    </div>
  );
}

重要提示对于可用性，请考虑您甚至可以使用额外的参数，如数量到numUp或numDown

赞(0）回复(0）举报 2022-11-14

e0bqpujr2#

您应该创建一个包含计数器状态和箭头元素的组件，并使用它两次。

import React from "react";
import { AiOutlineArrowDown, AiOutlineArrowUp } from "react-icons/ai";
import { useState } from "react";

const ValueComp = () => {
  const [num, setnum] = useState(0);

  const numdown = () => {
    num != 0 ? setnum(num - 1) : setnum(num);
  };
  const numup = () => {
    num < 9 ? setnum(num + 1) : setnum(num);
  };

  return (
    <>
      <AiOutlineArrowDown onClick={numdown} />
      {num}
      <AiOutlineArrowUp onClick={numup} />
    </>
  );
};

const Vote = () => {
  return (
    <>
      <ValueComp />
      <ValueComp />
    </>
  );
};

export default Vote;

赞(0）回复(0）举报 2022-11-14

vmjh9lq93#

我想你看起来像这样：

应用程序js

import { useState } from "react";

export default function App() {
  let [data, setData] = useState(0);
  const handleData = (type) => () => {
    setData((prvState) => {
      return type === "up" ? ++prvState : --prvState;
    });
  };

  return (
    <div>
      <button onClick={handleData("up")} style={{ marginRight: "5px" }}>
        Up
      </button>
      {data}
      <button onClick={handleData("down")} style={{ marginLeft: "5px" }}>
        Down
      </button>
    </div>
  );
}

如果您需要多次执行相同的操作，则可以创建一个组件并相应地修改此代码。
运行我提供的sandbox中的代码。

赞(0）回复(0）举报 2022-11-14

我来回答

npm 如何在react.js中将多个状态函数收缩为一个

3条答案

相关问题

热门标签

最新问答