React에서 onClick 이벤트에 값을 어떻게 전달합니까?

React에서 onClick 이벤트에 값 전달

React에서 onClick 이벤트에 값을 전달하는 것은 어려울 수 있으며 예기치 않은 콘솔 출력으로 이어질 수 있습니다. 이 문서에서는 이 문제를 해결하는 두 가지 방법을 살펴봅니다.

방법 1: 화살표 함수 사용

가장 간단한 접근 방식은 화살표 함수를 사용하는 것입니다. 이벤트:

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

방법 2: 이벤트 생성 하위 구성 요소

보다 구조화된 솔루션은 onClick 이벤트를 처리하는 하위 구성 요소를 만드는 것입니다.

하위 구성 요소(ES6)

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

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

주요 구성 요소 (ES6)

return (
  {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>
);

By 이러한 방법을 활용하면 React 애플리케이션의 onClick 이벤트에 값을 효과적으로 전달할 수 있습니다.

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