我该如何在React中隐藏元素？

如何解决我该如何在React中隐藏元素？

如果我有这个简短的响应代码，并且遇到了一些麻烦。当我单击按钮旁边的按钮时，我试图隐藏该按钮所属的标题，以便特定的标题和按钮在循环中消失。我该怎么办？

例如：如果我单击第一个按钮标题，则应该消失（“嘿”），如果我单击第三个按钮，则第三个标题将消失（“以后”）

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;

解决方法

您的代码有很多错误。您的代码应大致如下：

# DataSource 
ds.database-driver=com.mysql.jdbc.Driver
ds.url=jdbc:mysql://localhost:3306/myData?useUnicode=yes&characterEncoding=UTF-8
ds.username=root
ds.password=password

---

如果您的数组是字符串列表，则更加容易

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 && (
        <div key={text}>
          <h1>{text}</h1>
          <button onClick={onClickBtn(text)}>Hide</button>
        </div>
      )
  );
  return <div className="App">{display}</div>;
}