如何在 React Native 中更改另一个按钮 onPress 的状态？

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]); 
    }
}

Answer 1

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

我的解决方案非常混乱，代码也不是很好。我希望它能给你一些想法。一个不同的想法是你可以使用useRef 来标记按钮颜色的当前引用。从那里根据这些参考有条件地设置状态

您还应该再次检查您的代码。你应该使用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>

Answer 2

您基本上需要条件逻辑来检查另一个按钮是否处于活动状态。你可以这样做：

  const App = props => {
      const [color, setColor] = React.useState(false);
      const [color2, setColor2] = React.useState(false);

      const toggle = function () {
        if (color) {
          setColor(false);
        } else {
          setColor(true);
          setColor2(false);
        }
      };

      const toggle2 = function () {
        if (color2) {
          setColor2(false);
        } else {
          setColor2(true);
          setColor(false);
        }
      };

      return (
        <div>
          <button
            style={{ backgroundColor: color ? "#ff6700" : "#ffffff" }}
            onClick={toggle}
          >
            Button1
          </button>
          <button
            onClick={toggle2}
            style={{ backgroundColor: color2 ? "#ff6700" : "#ffffff" }}
          >
            Button2
          </button>
        </div>
      );
    };

这里有一个codepen 供您试用。

Answer 3

据我了解，您只想在单击一个按钮时更改两个按钮的颜色。一种方法可能是：

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

或者您甚至可以在函数本身中调用其他函数。喜欢：

function onClick1() {
    ...
    onClick2();
}

希望这会有所帮助。