React JS의 onClick 이벤트 핸들러에 값을 효율적으로 전달하려면 어떻게 해야 합니까?

React js onClick 이벤트 값 전달

React js 이벤트 작업 시 메소드에 값을 전달하는 것이 어려울 수 있습니다. 다양한 솔루션을 모색하여 이 문제를 해결하겠습니다.

1. 화살표 함수 사용

가장 간단한 방법은 화살표 함수를 활용하는 것입니다.

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

화살표 함수는 적절한 매개변수를 사용하여 handlerSort를 호출하는 새로운 함수를 생성합니다. 하지만 이 접근 방식은 매번 새로운 기능을 생성하므로 불필요한 재렌더링이 발생합니다.

2. 하위 구성 요소로 추출(권장)

더 나은 접근 방식은 onClick 이벤트 처리를 하위 구성 요소로 추출하는 것입니다. 핸들러와 값을 소품으로 사용하는 하위 구성 요소를 만듭니다.

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

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

메인 구성 요소에서 핸들러와 값 소품을 하위 구성 요소에 전달합니다.

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

이것은 핸들러 참조가 절대 변경되지 않도록 보장하여 불필요한 재렌더링을 최소화합니다.

3. ES5 방법(기존)

ES5를 사용하는 경우 다음과 같이 구성요소 컨텍스트로 함수를 바인딩할 수 있습니다.

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

위 내용은 React JS의 onClick 이벤트 핸들러에 값을 효율적으로 전달하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!