Çözüldü React state hatam nedir?

249873 · 21 Temmuz 2023

Arkadaşlar elimde 3 adet button var. Ben bunlardan birisine tıkladığımda o yeşil olsun diğerleri kırmızı olsun istiyorum. Ama state yöntemi ile bunu yapamıyorum.

Kodları;

youthful-ace-9z3vw2 - CodeSandbox

youthful-ace-9z3vw2 by hdogukanozkan using loader-utils, react, react-dom, react-scripts

codesandbox.io

İstediğim ekran görüntüsü;

oynozan · 21 Temmuz 2023

Her component'in kendi state'leri vardır. Sen parent component'i kullanmadan diğer butonların state'lerini değiştirmeye çalışmışsın. Kodunu şu şekilde değiştir:

JavaScript:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [check, setCheck] = useState({
    first: false,
    second: false,
    third: false
  });

  function handleClick(target) {
    let obj = { ...check }; // Clone object
    for (let key of Object.keys(obj)) {
      if (target !== key) obj[key] = false;
      else obj[key] = true;
    }
    setCheck(obj);
  }

  return (
    <div className="App">
      <Button check={check.first} onClick={() => handleClick("first")} />
      <Button check={check.second} onClick={() => handleClick("second")} />
      <Button check={check.third} onClick={() => handleClick("third")} />
    </div>
  );
}

function Button({ check, onClick }) {
  return <button onClick={onClick} className={check ? "green" : "red"}>Test</button>;
}

useRef ile çok daha temiz bir kod yazabilirsin ama sanırım React'ta yenisin o yüzden sadece state'leri kullandım.

249873 · 21 Temmuz 2023

oynozan dedi:
Her Component'in kendi State'leri vardır. Sen parent Component'i kullanmadan diğer butonların State'lerini değiştirmeye çalışmışsın. Kodunu şu şekilde değiştir:

JavaScript:

import "./styles.css"; import { useState } from "react"; export default function App() { const [check, setCheck] = useState({ first: false, second: false, third: false }); function handleClick(target) { let obj = { ...check }; // Clone object for (let key of Object.keys(obj)) { if (target !== key) obj[key] = false; else obj[key] = true; } setCheck(obj); } return ( <div className="App"> <Button check={check.first} onClick={() => handleClick("first")} /> <Button check={check.second} onClick={() => handleClick("second")} /> <Button check={check.third} onClick={() => handleClick("third")} /> </div> ); } function Button({ check, onClick }) { return <button onClick={onClick} className={check ? "green" : "red"}>Test</button>; }

UseRef ile çok daha temiz bir kod yazabilirsin ama sanırım React'ta yenisin o yüzden sadece State'leri kullandım.

Hocam useRef ile nasıl yapabilirim? Zahmet olmaz ise bir örnekte öyle atar mısınız?

oynozan · 21 Temmuz 2023

Silinen üye dedi:
Hocam useRef ile nasıl yapabilirim? Zahmet olmaz ise bir örnekte öyle atar mısınız?

Tabi hocam.

JavaScript:

import "./styles.css";
import { useRef, forwardRef  } from "react";

export default function App() {
  const buttons = useRef([]);
  const buttonCount = 3;

  function handleClick(el) {
    buttons.current.forEach(button => {
      button.className = "red";
    })
    el.className = "green";
  }

  return (
    <div className="App">
      {[...Array(buttonCount).keys()].map((v, i) => {
        // Create 3 buttons
        return <Button ref={el => buttons.current[i] = el} onClick={e => handleClick(e.target, i)} />
      })}
    </div>
  );
}

const Button = forwardRef((props, ref) => {
  return <button onClick={props.onClick} ref={ref}>Test</button>;
});

Nullo · 21 Temmuz 2023

biri

Silinen üye dedi:
Arkadaşlar elimde 3 adet button var. Ben bunlardan birisine tıkladığımda o yeşil olsun diğerleri kırmızı olsun istiyorum. Ama state yöntemi ile bunu yapamıyorum.

Kodları;

youthful-ace-9z3vw2 - CodeSandbox

youthful-ace-9z3vw2 by hdogukanozkan using loader-utils, react, react-dom, react-scripts

codesandbox.io

İstediğim ekran görüntüsü;

Eki Görüntüle 1870891

oynozan dedi:
Her component'in kendi state'leri vardır. Sen parent component'i kullanmadan diğer butonların state'lerini değiştirmeye çalışmışsın. Kodunu şu şekilde değiştir:

JavaScript:

import "./styles.css"; import { useState } from "react"; export default function App() { const [check, setCheck] = useState({ first: false, second: false, third: false }); function handleClick(target) { let obj = { ...check }; // Clone object for (let key of Object.keys(obj)) { if (target !== key) obj[key] = false; else obj[key] = true; } setCheck(obj); } return ( <div className="App"> <Button check={check.first} onClick={() => handleClick("first")} /> <Button check={check.second} onClick={() => handleClick("second")} /> <Button check={check.third} onClick={() => handleClick("third")} /> </div> ); } function Button({ check, onClick }) { return <button onClick={onClick} className={check ? "green" : "red"}>Test</button>; }

useRef ile çok daha temiz bir kod yazabilirsin ama sanırım React'ta yenisin o yüzden sadece state'leri kullandım.

JavaScript:

const handleClick = (button) => {    
    setCheck({      
        first: false,      
        second: false,      
        third: false,      
        [button]: true    
    });
};

bu şekilde de olur.

Çözüldü React state hatam nedir?

Ayrıntılı düzenleme

249873

Kilopat

youthful-ace-9z3vw2 - CodeSandbox

oynozan

oynozan

Megapat

249873

Kilopat

oynozan

Megapat

Nullo

Kilopat

youthful-ace-9z3vw2 - CodeSandbox

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz