React.js de buton arka planın değişmeme sorunu

poledrops 72 gün önce

123 defa görüntülendi

import React from "react";
import { NavLink,useNavigate} from "react-router-dom";
import { useModal } from "../ModalContext";
import "./aside.css";

function Aside() {
const { openModal } = useModal();
const navigate = useNavigate();
const handleNewPostClick = () => {

openModal();

};
const handleJournalClick = () => {

navigate('/');

};
const handleRolidClick = () => {

navigate('/rolid');

};
return (

<div className={`fixed bottom-0 z-50 w-full -translate-x-1/2 border-t border-blue-500 left-1/2 dark:bg-blue-500 dark:border-blue-500`} style={{ backgroundColor: "#1b2642" }}>
  <div className="w-full">
    <div className="grid max-w-xs grid-cols-2 gap-1 px-1 py-0.5 mx-auto my-1 bg-blue-200 rounded-lg dark:bg-white" role="group">
      <button type="button" className={`px-4 py-1 text-xs font-medium text-white-90 rounded-lg `} onClick={handleJournalClick} >
        Journal
      </button>
      <button type="button" className={`px-4 py-1 text-xs font-medium text-white-90 rounded-lg `}onClick={handleRolidClick}>
        Rolid
      </button>
    </div>
  </div>
  bu kodda arka plan değişikliği yapıldığında butona iki kez tıklamak gerekiyor ki öyle arka plan rengi değişebilsin tek tıklamada değişmiyor tailwind css kullandım burada yardım edebilecek olan var mı

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

poledrops

71 gün önce

<button type="button" className="px-4 py-1 text-xs font-medium text-white-90 rounded-lg" onClick={handleJournalClick}>
    Journal
</button>
<button type="button" className="px-4 py-1 text-xs font-medium text-white-90 rounded-lg" onClick={handleRolidClick}>
    Rolid
</button>

</div>
aslında burayı etkiliyor diğer şeyler olduğu için orayı eklemedim yanlış yazdım yani burayı etkilemesi lazım

#013220

gokcin

71 gün önce

React ve Tailwind CSS ile geliştirdiğiniz bu kodda, arka plan renginin değişikliği için butona iki kez tıklamanız gerektiğini belirtmişsiniz. Tek tıklamayla arka plan rengini değiştirmek istiyorsanız, problemin muhtemelen React'in state yönetimi veya Tailwind CSS'in dinamik sınıflarının kullanımıyla ilgili olduğunu düşünebiliriz.

Kodunuzda doğrudan bir arka plan rengi değişikliği ile ilgili bir işlem göremiyorum, ancak genel bir çözüm önerisi sunabilirim. Eğer arka plan rengini dinamik olarak değiştirmek istiyorsanız, React'te bir state kullanarak bu işlemi yönetebilirsiniz. Örneğin, bir butona tıkladığınızda arka plan rengini değiştiren basit bir örnek:

import React, { useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import { useModal } from "../ModalContext";
import "./aside.css";

function Aside() {
  const { openModal } = useModal();
  const navigate = useNavigate();
  // Arka plan rengini kontrol etmek için bir state tanımlayın
  const [bgColor, setBgColor] = useState("bg-blue-500"); // Başlangıç rengi

  const handleNewPostClick = () => {
    openModal();
  };

  const handleJournalClick = () => {
    navigate('/');
    // Arka plan rengini değiştir
    setBgColor("bg-green-500"); // Yeni renk
  };

  const handleRolidClick = () => {
    navigate('/rolid');
    // Arka plan rengini değiştir
    setBgColor("bg-red-500"); // Yeni renk
  };

  return (
    <div className={`fixed bottom-0 z-50 w-full -translate-x-1/2 border-t border-blue-500 left-1/2 ${bgColor}`} style={{ backgroundColor: "#1b2642" }}>
      <div className="w-full">
        <div className="grid max-w-xs grid-cols-2 gap-1 px-1 py-0.5 mx-auto my-1 bg-blue-200 rounded-lg dark:bg-white" role="group">
          <button type="button" className="px-4 py-1 text-xs font-medium text-white-90 rounded-lg" onClick={handleJournalClick}>
            Journal
          </button>
          <button type="button" className="px-4 py-1 text-xs font-medium text-white-90 rounded-lg" onClick={handleRolidClick}>
            Rolid
          </button>
        </div>
      </div>
    </div>
  );
}

export default Aside;

Bu örnekte, useState hook'u kullanılarak bgColor adında bir state tanımlanmış ve bu state, arka plan rengini tutmak için kullanılmıştır. Butonlara tıklama işlemleri sırasında setBgColor fonksiyonu ile bu state güncellenir ve böylece dinamik olarak arka plan rengi değiştirilmiş olur.

#013218