리액트 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.bind(that, column)} >{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 이벤트에 값을 전달하는 방법은 무엇인가요?

답변 1

쉬운 방법

화살표 함수를 사용하세요:

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

옛날 쉬운 방법 (ES5)

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

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

답변 2

리액트 js에서 onClick으로 메소드로 값을 전달할 수 없는 문제에 대해서 알아보고자 합니다.
리액트 js는 사용자 인터랙션이 중요한 웹 애플리케이션을 개발할 때 많이 사용되는 프레임워크입니다. 리액트 js에서는 onClick 이벤트를 통해 사용자가 버튼을 클릭했을 때 특정 동작을 수행하도록 할 수 있습니다. 이 때 onClick 속성으로 메소드를 호출할 수 있습니다.
그러나 onClick으로 호출하는 메소드에 특정 값을 전달하는 것은 어려운 문제입니다. 왜냐하면 onClick 속성은 메소드를 호출할 때 인자를 전달할 수 없기 때문입니다. 앞서 언급한 것처럼 리액트 js는 사용자 인터랙션이 중요하며, 이를 통해 동적으로 화면을 업데이트하는데 사용됩니다. 때문에 인자를 전달할 수 없는 이 문제는 상당히 제약적인 요소로 작용할 수 있습니다.
이러한 문제를 해결하기 위해서는 다른 방법을 사용해야 합니다. 가장 일반적으로 사용되는 방법은 onClick 이벤트 핸들러에 함수를 정의하고, 그 함수 안에서 인자를 활용하는 방법입니다.
예를 들어, 다음 코드는 버튼을 클릭했을 때 메소드를 호출하고 인자를 전달하는 방법을 보여줍니다.
```javascript
class MyComponent extends React.Component {
handleClick(value) {
console.log(전달된 값:, value);
// 동작 수행
}
render() {
const valueToPass = 전달할 값;
return (

);
}
}
```
위 코드에서는 handleClick 메소드를 정의하고, handleClick 메소드는 인자를 전달받아 그 값을 출력하는 동작을 수행합니다. 이때, valueToPass 변수를 클릭 이벤트 함수 안에 사용하여 값을 전달합니다. onClick 속성 안에 사용되는 화살표 함수는 클릭 이벤트가 발생했을 때 handleClick 메소드를 호출합니다. 이렇게 하면 onClick 이벤트 안에서 인자를 전달하는 것이 가능하게 됩니다.
리액트 js에서 onClick으로 메소드에 값을 전달하는 것은 다소 어렵지만, 위와 같은 방법을 사용하여 문제를 해결할 수 있습니다. 사용자 인터랙션 중심의 웹 애플리케이션을 개발할 때 이러한 문제가 발생할 수 있으므로, 이에 대한 대안을 항상 고려해야 합니다.