React JS에서 onClick 이벤트에 값을 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-11-28 13:57:12

원래의

235명이 탐색했습니다.

How to Pass Values to onClick Events in React JS?

React JS에서 onClick 이벤트에 값 전달

React의 onClick 이벤트 핸들러는 값 전달을 직접 허용하지 않습니다. 클릭하면 콘솔에 SyntheticMouseEvent 객체가 표시됩니다. 값을 효과적으로 전달하려면 다음 솔루션을 따르십시오.

쉬운 방법

화살표 함수 사용:

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

로그인 후 복사

이렇게 하면 다시 렌더링이 보장됩니다. 필요한 경우에만.

기존 Easy Way (ES5)

함수를 구성요소 컨텍스트에 바인딩:

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

로그인 후 복사

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