Reagieren: Nur angeklickte Zeilendaten öffnen

Question

Ich habe eine Zustandsvariable namens fullText definiert.

fullText 默认值为 false Der Standardwert ist false.

Wenn auf den vollständigen Text geklickt wird, möchte ich meinen Statuswert umkehren und dafür sorgen, dass der Text geschlossen und geöffnet werden kann. Aber wenn ich darauf klicke, öffnet sich der Text aller Zeilen in der Tabelle. Wie kann ich ihn zeilenspezifisch machen?

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

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