React js onClick으로 메소드에 값을 전달하는 방법

질문 : React js onClick이 메소드에 값을 전달할 수 없습니다.

---

onClick 이벤트 값 속성을 읽고 싶습니다. 하지만 클릭하면 콘솔에 다음과 같은 내용이 표시됩니다.

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

내 코드가 올바르게 작동합니다. 실행할 때 {column} 볼 수 있지만 onClick 이벤트에서는 가져올 수 없습니다.

내 코드 :

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

React js onClick 이벤트에 값을 어떻게 전달할 수 있습니까?

답변

---

쉬운 방법 :

화살표 기능 사용 :

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

그러면 올바른 매개 변수를 사용하여 handleSort 를 호출하는 새 함수가 생성됩니다.

 

더 나은 방법 :

하위 구성 요소로 추출하십시오. 렌더링 호출에서 화살표 함수를 사용할 때의 문제는 매번 새 함수를 생성하여 불필요한 다시 렌더링을 유발한다는 것입니다.

하위 구성 요소를 생성하는 경우 핸들러를 전달하고 props를 인수로 사용할 수 있습니다. 그러면 props가 변경 될 때만 다시 렌더링됩니다 (이제 핸들러 참조가 변경되지 않기 때문).

하위 구성 요소

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

---

Old Easy Way (ES5)

.bind 를 사용하여 원하는 매개 변수를 전달하면 컴포넌트 컨텍스트와 함수를 바인딩 할 수 있습니다.

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

 

출처 : https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method