Как изменить состояние другой кнопки в Press onReact Native? - PullRequest
Новая
       53

Как изменить состояние другой кнопки в Press onReact Native?

0 голосов
/ 28 мая 2020

У меня есть 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]); 
    }
}

Ответы [ 3 ]

1 голос
/ 28 мая 2020

Надеюсь, это вам поможет. Если нет, дайте мне знать.

Мое решение довольно запутанное и не очень хороший код. Надеюсь, это может дать вам некоторое представление. Другая идея - вы можете использовать useRef, чтобы отметить текущую ссылку цвета кнопки. Оттуда setState условно на основе этих ссылок

Также вам следует снова проверить свой код. Вы должны использовать useState(false) not "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>
0 голосов
/ 28 мая 2020

Вам в основном нужен условный лог c, чтобы проверить, активна ли другая кнопка. Вы можете сделать это так: 

  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 , чтобы вы могли попробовать его.

0 голосов
/ 28 мая 2020

Насколько я понял, вы хотите изменить цвет обеих кнопок, нажав только одну. Один из способов сделать это: 

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

Или вы даже можете вызвать другую функцию в самой функции. Например: 

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

Надеюсь, это поможет.

...