javascript - 如何更改另一个按钮 onPress onReact Native 的状态？

Question

我有 2 个按钮，如果按下它们，就会改变它们的背景颜色。如果我同时按下它们，它们都会改变背景颜色。我想在两者之间切换背景颜色（例如，如果我按下一个，另一个会回到原始状态）我该如何实现？`

const [color, setColor] = useState("false");
const [font, setFont] = useState("#505050");
const [color2, setColor2] = useState(false);
const [font2, setFont2] = useState("#505050");

function onClick() {
    const colors = [
      "#ff6700",
      "#ffffff"
    ]

if ( colors.indexOf(color) === 0 ) {
    setColor(colors[1]); 
} else {
    setColor(colors[0]); 
}

const fonts = [
  "#ffffff",
  "#505050"
]
if ( fonts.indexOf(font) === 0 ) {
    setFont(fonts[1]); 
} else {
    setFont(fonts[0]); 
}
}

function onClick2() {
    const colors2 = [
      "#ff6700",
      "#ffffff"
    ]

if ( colors2.indexOf(color2) === 0 ) {
    setColor2(colors2[1]); 
} else {
    setColor2(colors2[0]); 
}

const fonts2 = [
  "#ffffff",
  "#505050"
]
if ( fonts2.indexOf(font2) === 0 ) {
    setFont2(fonts2[1]); 
} else {
    setFont2(fonts2[0]); 
    }
}

标签： javascriptfunctionreact-nativereact-hooksexpo

Answer 1

希望这对您有所帮助。如果没有，请告诉我。

我的解决方案非常混乱，而且代码不是很好。我希望它能给你一些想法。一个不同的想法是你可以用它useRef来标记按钮颜色的当前参考。从那里 setState 有条件地基于这些 refs

此外，您应该再次检查您的代码。useState(false)你不应该使用"false"

const [color, setColor] = useState(null);
const [color2, setColor2] = useState(null);


const onClick = (button) => {

    if(button == 1){
        if(color2 == "changed color"){
            setColor("color 1");
            setColor2("origin color");
        }else{
            setColor("color 1");
        }
    }else{
        if(color1 == "changed color"){
            setColor2("color 2");
            setColor("origin color");
        }else{
            setColor2("color 2");
        }
    }


}

然后像这样传递它：

<button onClick={() => onClick(1)}>Button 1</button>
<button onClick={() => onClick(2)}>Button 2</button>