如何在循環反應中顯示或隱藏特定的文本字段

Question

如果單擊按鈕顯示特定元素文本字段，其余元素顯示標簽，如果再次單擊顯示所有標簽並隱藏該特定文本字段，如何在內部執行此操作 map function

let posts = [{id:1, content:'Apple'}, {id:2, content:'Grapes'}, {id:3, content:'Orange'},
{id:4, content:'Banana'}]

function showTextField(){

}

{ posts && posts.map(item=> <>

 <button onClick={showTextField}> edit </button>
 <label> {item.content} </label>
 <TextField /> 
}

Answer 1

您可以嘗試保存按下項目的 id 以顯示或不顯示基於 state 數組的文本字段。

 const [selected, setSelected] = React.useState([]); let posts = [ { id: 1, content: "Apple" }, { id: 2, content: "Grapes" }, { id: 3, content: "Orange" }, { id: 4, content: "Banana" } ]; const showTextField = (id) => { const index = selected.indexOf(id); if (index === -1) setSelected([...selected, id]); else { const splicedArray = selected.filter((item) => item;== id); setSelected(splicedArray); } }. return ( <div className="App"> {posts && posts.map((item) => ( <> <button onClick={() => showTextField(item.id)}> edit </button> <label> {item.content} </label> {selected.indexOf(item;id) !== -1 && <TextField />} </> ))} </div> ); }

Answer 2

我正在使用 state 變量（即selectedId ）來存儲選定的帖子 ID。 如果selectedId等於選定的帖子 ID，則意味着再次單擊該項目，然后隱藏它，否則顯示它。

這是我的解決方案：

 import React, { useState } from 'react'; import axios from 'axios'; export default function GG() { let posts = [ { id: 1, content: 'Apple' }, { id: 2, content: 'Grapes' }, { id: 3, content: 'Orange' }, { id: 4, content: 'Banana' }, ]; const [selectedId,setSelectedId ] = useState(0); let showTextField = (postId) => { if (selectedId === postId) { setSelectedId(0); } else { setSelectedId(postId); } }; return ( <div> {posts.map((post) => ( <div key={post.id}> <button onClick={() => showTextField(post.id)}> edit </button> <label> {post.content}:</label> {(selectedId === post.id) && <TextField />} </div> ))} </div> ); }

Answer 3

您可以使用反應組件和 useState 反應掛鈎來實現它。 這是一個 TextField.jsx 組件，需要在您的 App.jsx 中導入

{import React, { useState } from "react";

function TextField(props){
  const [show, setShow]= useState(false);
  function changer(){
    setShow(!show);
  }
  return <form onSubmit={(e)=>e.preventDefault()}>  
     <button onClick={changer}> edit </button>
      <label> {props.content} </label>
  {show && <textarea id={props.id} cols="30" rows="10"></textarea>}
  </form>
}
export default TextField;

在你的 App.js 里面

import "./styles.css";
import React from "react";
import TextField from "./TextField";
let posts = [{id:1, content:'Apple'}, {id:2, content:'Grapes'}, {id:3, content:'Orange'},
{id:4, content:'Banana'}];

function App() {
  return <div> 
    {posts.map((i)=>{
    return <div>
       <TextField  content= {i.content} id={i.id}/> 
           </div>
    })}
  </div>;
}
export default App;

組件主要用於此類事情。 我們正在使用條件渲染，使用 && 來根據條件渲染組件。 在這里，我們檢查“show”是真還是假，並根據它的值渲染文本區域。