Блог

Главная - Вопросы по программированию - Как я могу скрыть элемент внутри цикла с помощью react?

Как я могу скрыть элемент внутри цикла с помощью react?

#javascript #reactjs #loops #dictionary #npm

#javascript #reactjs #циклы #словарь #npm

Вопрос:

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

пример: если я нажму заголовок 1-й кнопки, он должен исчезнуть («привет»), а если я нажму 3-ю кнопку, 3-й заголовок исчезнет («позже»)

 import React from 'react';

class AppEX extends React.Component {
    constructor() {
        super();
        this.state = {
          ishidden: false,
            list: [
                { text: 'hey'},
                { text: 'bye'},
                { text: 'later'}
            ]
        };
    }

    hideHeader = e => {
      this.setState ={
        ishidden: true }

      
        
    };

    render() {
       
        return (
          <div>
          
             { this.state.list.map((s,idx)=> (
               
               <div key={idx}>
                 <h1>{s.text}</h1>
                 <button
                  onClick={(e) => this.hideHeader(e)}>
                    DONE
                  </button>

                 </div>
                 

             ))}

             </div>





          
        )}
}

export default AppEX;

Комментарии:

1. Подсказка: Добавьте свойство isHidden к каждому элементу в списке и передайте индекс в функцию

2. как добавить в json?

3. Какой json? Здесь ничего не показано. Если вы имеете в виду массив списка состояний, который не является json. Переключая логическое значение в каждом элементе, вы можете затем использовать это для отображения или не отображения заголовка

4. куда бы я добавил логическое значение в каждый элемент?

5. { text: 'bye', ishidden:false} затем в render {!s.ishidden amp;amp; <h1>{s.text}</h1>} начните выяснять, как получить доступ к этому элементу в массиве при нажатии кнопки, чтобы вы могли изменить этот объект, чтобы вернуть его в состояние

Ответ №1:

В вашем коде много ошибок. Ваш код должен примерно выглядеть следующим образом:

 import React, { useState } from "react";

export default function App() {
  const [list, setList] = useState([
    { text: "hey" },
    { text: "bye" },
    { text: "later" }
  ]);
  const onClickBtn = (t) => () =>
    setList((l) =>
      l.map(({ text, hide }) => ({ text, hide: text === t ? true : hide }))
    );
  const display = list.map(
    ({ text, hide }) =>
      !hide amp;amp; (
        <div key={text}>
          <h1>{text}</h1>
          <button onClick={onClickBtn(text)}>Hide</button>
        </div>
      )
  );
  return <div className="App">{display}</div>;
}

Еще проще, если бы ваш массив был списком строк

 import React, { useState } from "react";

export default function App() {
  const [list, setList] = useState(["hey", "bye", "later"]);
  const onClickBtn = (t) => () => setList((l) => l.filter((s) => s !== t));
  const display = list.map((text) => (
    <div key={text}>
      <h1>{text}</h1>
      <button onClick={onClickBtn(text)}>Hide</button>
    </div>
  ));
  return <div className="App">{display}</div>;
};