React：僅開啟點擊的行數據

Question

我定義了一個名為 fullText 的狀態變數。

fullText 預設值為 false。

當單擊全文時，我想反轉我的狀態值並使文字能夠關閉和開啟。但是當單擊時，表中所有行的文字都會打開，如何使其特定於行？

{
  !this.state.fullText ?

       <div onClick={() => this.setState({ fullText: !this.state.fullText })}
       className="text-primary cursor-pointer font-size-14 mt-2 px-2"
        key={props.data?.id}>
                Full Text
        </div>
         :
         <>
       <div onClick={() => this.setState({ fullText: !this.state.fullText
          })}className="text-primary cursor-pointer font-size-14 mt-2 px-2"
          key={props.data?.id}>
                 Short Text
       </div>
               <span>{ props.data?.caption}</span>
        </>
          }

Answer 1

似乎問題中的程式碼範例對於每一行都是重複的，但只有 1 個狀態 fullText （CodeSandbox 中的 showMore）對於所有這些行都是通用的。因此它們都一起打開或關閉。

如果您希望每行都有單獨的開啟/關閉功能，那麼每行需要 1 個這樣的狀態。一個簡單的解決方案可能是將此狀態嵌入到每行的資料中：

export default class App extends Component {
  state = {
    data: [
      {
        id: 1,
        description: "aaaaa",
        showMore: false // Initially closed
      },
      // etc.
    ]
  };

  render() {
    return (
      <>
        {this.state.data.map((e) => (
          <>
            { /* Read the showMore state of the row, instead of a shared state */
              e.showMore === false ? (
              
 this.setState({ data: changeShow(this.state.data, e.id, true) })}>
                Show description{" "}
              
            ) : (
              <>
                
 this.setState({ data: changeShow(this.state.data, e.id, false) })}>
                  Show less{" "}
                
                {e.description} 
              
            )}
          
        ))}
      
    );
  }
}

/*** 更新showMore屬性
 * 具有給定 id 的行。*/
function changeShow(data, id, show) {
  for (const row of data) {
    if (row.id === id) { // Find the matching row id
      row.showMore = show; // Update the property
    }
  }
  return data;
}