React : ouvrir uniquement les données des lignes cliquées

Question

J'ai défini une variable d'état nommée fullText.

fullText 默认值为 false La valeur par défaut est false.

Lorsque l'on clique sur le texte intégral, je souhaite inverser la valeur de mon état et permettre au texte de se fermer et de s'ouvrir. Mais lorsque vous cliquez dessus, le texte de toutes les lignes du tableau s'ouvre. Comment puis-je le rendre spécifique à une ligne ?

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

Il semble que l'exemple de code dans la question soit répété pour chaque ligne, mais un seul état fullText （CodeSandbox 中的 showMore) est commun à toutes. Ils s'allument ou s'éteignent donc tous ensemble.

Si vous souhaitez que chaque ligne ait une fonctionnalité d'ouverture/fermeture distincte, vous avez besoin d'un tel état par ligne. Une solution simple pourrait être d'intégrer ce statut dans les données de chaque ligne :

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