0

React アプリケーションでprime-react のDataTableコンポーネントを使用して、データ テーブルを作成しています。行がダブルクリックされたときに行の色を変更したい。ただし、別の行をクリックすると、前に強調表示された行の色が元の色に戻る必要があります。ドキュメントを確認しましたが、prime-react は行の色を変更する API を提供していないようです。では、これを達成するための最良の方法は何でしょうか?

このように行の色を変更できますが、他のすべての行の色を元に戻す効率的な方法がわかりません。さらに、バニラ JavaScript を使用して DOM を変更するのは良い習慣ではありませんか?

  const highlightRow = event => {
    event.originalEvent.currentTarget.classList.add('highlighted-row');
  };

  <DataTable
     value={props.values}
     onRowDoubleClick={event => highlightRow(event)}
   >

CSS:

.highlighted-row {
    background-color: blue;
}
4

2 に答える 2

0

状態 ( https://reactjs.org/docs/state-and-lifecycle.html )を使用して、現在ダブルクリックされている行を追跡する必要があります。その後、おそらくそのコンポーネントで選択プロップを使用できます。

selection={this.state.selectedCar1} onSelectionChange={e => this.setState({selectedCar1: e.value})}

この例を確認してください https://www.primefaces.org/primereact/showcase/#/datatable/selection

于 2020-03-10T14:30:12.420 に答える