React: Buka data baris yang diklik sahaja

Question

Saya menentukan pembolehubah keadaan bernama fullText.

fullText 默认值为 false Nilai lalai ialah false.

Apabila teks penuh diklik, saya mahu menyongsangkan nilai keadaan saya dan menjadikan teks boleh ditutup dan dibuka. Tetapi apabila diklik, teks semua baris dalam jadual terbuka, bagaimana saya boleh menjadikannya khusus baris?

{
  !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

Nampaknya contoh kod dalam soalan diulang untuk setiap baris, tetapi hanya 1 keadaan fullText （CodeSandbox 中的 showMore) adalah perkara biasa bagi kesemuanya. Jadi mereka semua menghidupkan atau mematikan bersama-sama.

Jika anda mahu setiap baris mempunyai fungsi buka/tutup yang berasingan, maka anda memerlukan 1 keadaan sedemikian bagi setiap baris. Penyelesaian mudah adalah dengan membenamkan status ini ke dalam data setiap baris:

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} 
              
            )}
          
        ))}
      
    );
  }
}

/**
 * Update the showMore property of the
 * row with the given 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;
}