React에서 onClick 이벤트에 값을 어떻게 전달할 수 있나요?

React js: onClick 이벤트에 값 전달

React에서는 onClick 이벤트 값 속성에 액세스하는 것이 어려울 수 있으며 "SyntheticMouseEvent {...}"와 같은 콘솔 메시지가 표시됩니다. 원하는 값 대신. 이 문제는 React의 이벤트 처리 메커니즘을 이해하고 적절한 기술을 사용하면 해결할 수 있습니다.

쉬운 방법

화살표 기능을 사용하여 onClick 이벤트에 값을 전달하려면 다음 접근 방식을 따르세요.

return (
  <th value={column} onClick={() => this.handleSort(column)}>
    {column}
  </th>
);

이렇게 하면 올바른 매개변수로 handlerSort를 호출하는 새로운 함수가 생성됩니다.

더 좋음 방법

최적의 성능을 위해서는 onClick 처리를 하위 구성 요소로 추출하는 것이 좋습니다. 이렇게 하면 핸들러 참조가 변경되지 않고 불필요한 재렌더링이 방지됩니다.

하위 구성 요소:

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  };

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

주 구성 요소:

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
));}

위 내용은 React에서 onClick 이벤트에 값을 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!