React에서 onClick 이벤트에 값을 전달하는 방법은 무엇입니까?

React의 onClick 이벤트에 값 전달

React의 onClick 이벤트 핸들러는 기본적으로 매개변수를 허용하지 않습니다. onClick이 트리거되면 명시적인 값 전송 없이 합성 이벤트 속성이 표시됩니다. 이 문제를 극복하기 위해 여러 가지 접근 방식을 사용할 수 있습니다.

화살표 함수(쉬운 방법)

화살표 함수를 사용하여 onClick 핸들러에 값을 수동으로 전달할 수 있습니다.

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

이렇게 하면 원하는 매개변수로 handlerSort를 호출하는 새 함수가 생성됩니다. 하지만 과도한 함수 생성은 불필요한 재렌더링을 초래할 수 있습니다.

하위 컴포넌트(최적 방법)

핸들러를 하위 컴포넌트로 추출하면 성능이 향상됩니다. 과도한 다시 렌더링:

하위 구성 요소

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

ES5 레거시 접근방식(쉬움 방법)

ES5 호환성을 위해 다음 접근 방식은 .bind를 사용하여 값을 전달할 수 있습니다.

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

가장 적절한 기술을 선택하면 다음의 onClick 이벤트에 값을 효과적으로 전달할 수 있습니다. 질문에 설명된 문제에 대응하고 피하세요.

위 내용은 React에서 onClick 이벤트에 값을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!