React: クリックされた行データのみを開く

Question

私は fullText という名前の状態変数を定義しました。

fullText デフォルト値は false です。

全文がクリックされたときに、状態値を反転してテキストを閉じたり開いたりできるようにしたいと考えています。しかし、クリックするとテーブル内のすべての行のテキストが開きます。行固有にするにはどうすればよいでしょうか?

{
  !this.state.fullText ?

       <div onClick={() => this.setState({ fullText: !this.state.fullText })}
       className="テキスト-プライマリ カーソル-ポインター font-size-14 mt-2 px-2"
        key={props.data?.id}>
                全文
        </div>
         :
         <>
       <div onClick={() => this.setState({ fullText: !this.state.fullText
          })}className="テキスト-プライマリ カーソル-ポインター フォント-サイズ-14 mt-2 px-2"
          key={props.data?.id}>
                 短いテキスト
       </div>
               <span>{ props.data?.caption}</span>
        </>
          }

Answer 1

質問のコード例は行ごとに繰り返されているようですが、すべてに共通する状態は fullText (CodeSandbox の showMore) の 1 つだけです。したがって、それらはすべて同時にオンまたはオフになります。

各行に個別の開閉機能を持たせたい場合は、行ごとにそのような状態が 1 つ必要です。簡単な解決策は、このステータスを各行のデータに埋め込むことです:

export デフォルト クラス App はコンポーネント { を拡張します
  状態 = {
    データ： [
      {
        ID:1、
        説明: 「ああああ」、
        showMore: false // 最初は閉じられています
      }、
      // など
    】
  };

  与える（） {
    戻る （
      <>
        {this.state.data.map((e) => (
          <>
            { /* 共有状態ではなく、行の showMore 状態を読み取ります */
              e.showMore === false ? (
              
 this.setState({ data:changeShow(this.state.data, e.id, true) })}>
                説明を表示{" "}
              
            ):(
              <>
                
 this.setState({ data:changeShow(this.state.data, e.id, false) })}>
                  表示を少なくする{" "}
                
                {説明} 
              
            )}
          
        ))}
      
    );
  }
}

/*** の showMore プロパティを更新します。
 * 指定された ID を持つ行。*/
関数changeShow(データ、ID、表示) {
  for (データの定数行) {
    if (row.id === id) { // 一致する行 ID を検索します
      row.showMore = show; // プロパティを更新します
    }
  }
  データを返す。
}