如何设置useState只选择一种颜色

Question

我有一个列表 3 div 具有不同颜色的背景，如果我单击其中一个，该函数会将状态设置为 true，这将呈现一个嵌套在div ，但我只能选择一种颜色，我如何修改代码，所以如果我点击一个 div ， div 的状态将为真，并且会出现勾号图标但是它将从其他 div 中消失（如果之前已选择）。

const [colorPick, setColorPick] = useState(false);

const colorPickHandler = () => {
    setColorPick(!colorPick);
  }; 

<button className="cursor-pointer" onClick={colorPickHandler}>
              <div className="mt-3 border-2 border-solid border-black bg-red-600 w-8 h-8">
                {colorPick && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </div>
            </button>
<button className="cursor-pointer" onClick={colorPickHandler}>
              <div className="mt-3 border-2 border-solid border-black bg-blue-600 w-8 h-8">
                {colorPick && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </div>
            </button>
<button className="cursor-pointer" onClick={colorPickHandler}>
              <div className="mt-3 border-2 border-solid border-black bg-pink-600 w-8 h-8">
                {colorPick && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </div>
            </button>

Answer 1

colourPick 应该是字符串，而不是布尔值

它应该取“红色”、“蓝色”或“棕色”的值

所以你可以做类似 colourPick === “red” && renderSvg

Answer 2

您可以像对象一样为所有 3 种颜色定义状态。喜欢，

state = {red:false, blue:false, yellow:false};

if (e.target.name === 'red') setState = { red:true, blue:false, yellow:false }
else if (e.target.name === 'blue') setState = { red:false, blue:true, yellow:false };
else if (e.target.name === 'yellow') setState = { red:false, blue:false, yellow:true }

Here you need to pass e parameter in the ColorPicker(e) function.

并在红色按钮和其他按钮上分别添加 name="red"。

如何设置useState只选择一种颜色

How to set useState to choose only one Color

reactjs

function

tailwind-css

use-state