NEOmanceR
@NEOmanceR
Начинающий веб разработчик

Как сбросить состояние всех компонентов одной кнопкой?

Как правильно написать логику, чтобы кнопка ресет делала все тексты снова черного цвета?
Когда кликаю на текст, он меняется на красный, кликаю повторно и меняется на черный.
А когда нажимаю ресет, то ничего не происходит.

import './App.css';
import Text from './Text/Text';
import {useState} from 'react'

function App() {

  let [status, setStatus] = useState(false)


  let list = [
    {id: 1, text: 'Text 1'},
    {id: 3, text: 'Text 2'},
    {id: 2, text: 'Text 3'},
  ]

  function resetColor(params) {
    setStatus(false)
  }

  return (
    <div className="App">
      <button
        onClick={()=>{resetColor()}}
      >reset color</button>
      {list.map(({id, text}) => {
        return (
          <Text key={id} text={text} />
        )
      })}
    </div>
  );
}

export default App;


import React from 'react';
import './text.css';
import { useState } from 'react'


const Text = ({text, status}) => {

  let [active, setActive] = useState(status);

  function changeColor() {
    console.log('work');
    setActive(active = !active)
  }

  return (
  <p
    className={active ? 'red-text' : ''}
    onClick={()=>{changeColor()}}
  >
    {text}
  </p>
  );
};

export default Text
  • Вопрос задан
  • 132 просмотра
Пригласить эксперта
Ответы на вопрос 4
kritskiy_a
@kritskiy_a
Frontend-developer
function resetColor(params) {
    setStatus(!status)
  }
Ответ написан
Комментировать
TheSnegok
@TheSnegok
У тебя нету обратной логики оно у тебя ставит только в положение false по клику и всё
в функции напиши так:
const resetColor = () => {
status ? setStatus(false) : setStatus(true);

И для change также только используй, и status тебе нужно передавать в компоненту text, и там уже ставить класс на чёрный текст если она true
Ответ написан
Комментировать
0xD34F
@0xD34F
Храните значения, отвечающие за цвет текста, в родительском компоненте, можно вместе с остальными данными:

const [ items, setItems ] = useState([
  { id: ..., text: '...', active: false },
  { id: ..., text: '...', active: false },
  ...
]);

Тогда сброс этих значений оказывается делом тривиальным:

const reset = () => setItems(items.map(n => ({ ...n, active: false })));

<button onClick={reset}>reset</button>

Ну а переключение значений изнутри экземпляров компонента Text придётся переписать. Сделаем функцию, которая принимает id, и изменяет соответствующий элемент:

const toggle = id => setItems(items.map(n => n.id === id ? { ...n, active: !n.active } : n));

Передадим эту функцию в экземпляры компонента Text:

{items.map(n => <Text key={n.id} {...n} toggle={toggle} />)}

Назначим её в качестве обработчика клика:

const Text = ({ id, text, active, toggle }) => (
  <p
    className={active ? 'active' : ''}
    onClick={() => toggle(id)}
  >
    {text}
  </p>
);

Всё.
Ответ написан
Комментировать
@yaroslav1996
function resetColor(params) {
    setStatus(prevStatus => !prevStatus)
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы