ES6 구문을 사용하여 온클릭 이벤트를 통해 전달 매개 변수 반응

ES6 구문을 사용하여 온클릭 이벤트를 통해 전달 매개 변수 반응

ES6 구문을 사용하여 추가 파라미터를 onClick 이벤트에 전달하는 방법

예:

handleRemove = (e) => {

}

render() {
     <button onClick={this.handleRemove}></button>
}

ID를 전달하고 싶다.handleRemove다음과 같이 기능합니다.

<button onClick={this.handleRemove(id)}></button>

에서 그것을 기억하십시오.onClick={ ... },그...는 JavaScript 표현입니다.그렇게

... onClick={this.handleRemove(id)}

와 같다

var val = this.handleRemove(id);
... onClick={val}

즉, 당신이 전화하는 전화는this.handleRemove(id)즉시, 그리고 그 값을 전달한다.onClick그건 네가 원하는 게 아니야

대신 인수 중 하나가 미리 채워져 있는 새로운 함수를 만듭니다.기본적으로 다음 중 하나가 필요합니다.

var newFn = function() {
  var args = Array.prototype.slice.call(arguments);

  // args[0] contains the event object
  this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}

이를 ES5 JavaScript로 표현하는 방법이 있습니다.

... onClick={this.handleRemove.bind(this, id)}

사용하시는 경우React.createClass, React는 자동으로 바인드됩니다.this예를 들어, 당신이 그것을 변경하지 않는 한 불평할 수 있습니다.this.handleRemove.bind(null, id).

함수를 인라인으로 간단하게 정의할 수도 있습니다.환경 또는 트랜스필러가 지원하는 경우 화살표 함수를 사용하여 단축할 수 있습니다.

... onClick={() => this.handleRemove(id)}

이벤트에 액세스 할 필요가 있는 경우는, 다음과 같이 전달할 수 있습니다.

... onClick={(evt) => this.handleRemove(id, evt)}

버튼 요소의 값 속성을 사용하여 ID를 전달합니다.

<button onClick={this.handleRemove} value={id}>Remove</button>

그런 다음 handle Remove에서 이벤트의 값을 다음과 같이 읽습니다.

handleRemove(event) {
...
 remove(event.target.value);
...
}

이렇게 하면 구성 요소가 다시 렌더링될 때마다 화살표 기능을 사용하는 것과 비교하여 새 기능이 생성되지 않습니다.

화살표 기능을 다음과 같이 사용합니다.

<button onClick={()=>{this.handleRemove(id)}}></button>

onClick={this.handleRemove.bind(this, id)}

화살표 기능과 함께 사용

onClick={()=>{this.handleRemove(id)}}

지금까지 아무도 언급하지 않은 것은 handle Remove에서 함수를 반환하도록 하는 것입니다.

다음과 같은 작업을 수행할 수 있습니다.

handleRemove = id => event => {
  // Do stuff with id and event
}

// render...
  return <button onClick={this.handleRemove(id)} />

그러나 이러한 솔루션에는 모두 각 렌더링에 새로운 기능이 생성된다는 단점이 있습니다.전달되는 버튼의 새 컴포넌트를 만드는 것이 좋습니다.id및 그handleRemove따로따로

TL;DR:

렌더 메서드 내에서 함수를 바인딩하지 마십시오(화살표 기능도 사용하지 않음).공식 권장 사항을 참조하십시오.

https://reactjs.org/docs/faq-functions.html

---

그래서, 받아들여지는 답변과 같은 점을 지적하는 몇 가지가 더 있습니다.그리고 또 다른 댓글들이 있는데bind같은 이유로 화살표 기능을 사용하지 않아도 됩니다(각 렌더링에 대해 여러 번 반복해서 작성됩니다).하지만 예가 없어서 하나 씁니다.

기본적으로 컨스트럭터에서 함수를 바인딩해야 합니다.

class Actions extends Component {

    static propTypes = {
        entity_id: PropTypes.number,
        contact_id: PropTypes.number,
        onReplace: PropTypes.func.isRequired,
        onTransfer: PropTypes.func.isRequired
    }

    constructor() {
        super();
        this.onReplace = this.onReplace.bind(this);
        this.onTransfer = this.onTransfer.bind(this);
    }

    onReplace() {
        this.props.onReplace(this.props.entity_id, this.props.contact_id);
    }

    onTransfer() {
        this.props.onTransfer(this.props.entity_id, this.props.contact_id);
    }

    render() {
        return (
            <div className="actions">
                <button className="btn btn-circle btn-icon-only btn-default"
                    onClick={this.onReplace}
                    title="Replace">
                        <i className="fa fa-refresh"></i>
                </button>
                <button className="btn btn-circle btn-icon-only btn-default"
                    onClick={this.onTransfer}
                    title="Transfer">
                    <i className="fa fa-share"></i>
                </button>                                 
            </div>
        )
    }
}

export default Actions

주요 항목은 다음과 같습니다.

컨스트럭터

this.onReplace = this.onReplace.bind(this);

방법

onReplace() {
    this.props.onReplace(this.props.entity_id, this.props.contact_id);
}

표현하다

onClick={this.onReplace}

기능 컴포넌트에서 이 기능은 훌륭하게 작동합니다. 2020년 이후 React 사용자가 새로 추가되었습니다. :)

handleRemove = (e, id) => {
    //removeById(id);
}

return(<button onClick={(e)=> handleRemove(e, id)}></button> )

다음 코드를 사용합니다.

<Button onClick={this.onSubmit} id={item.key} value={shop.ethereum}>
    Approve
</Button>

다음으로 메서드 내부를 나타냅니다.

onSubmit = async event => {
    event.preventDefault();
    event.persist();
    console.log("Param passed => Eth addrs: ", event.target.value)
    console.log("Param passed => id: ", event.target.id)
    ...
}

그 결과:

이벤트 => Eth 주소: 0x4D86c35fdC080Ce449E89C6에서 전달된 파라미터BC058E6cc4a4D49A6

이벤트 => ID: Mlz4OTBSwcgPLBZ7에서 매개 변수가 전달되었습니다.BQbwVjGip1

리액트 부트스트랩을 사용하고 있습니다.드롭다운에 대한 onSelect 트리거로 인해 데이터 전달이 허용되지 않았습니다.그냥 이벤트.따라서 임의의 값을 속성으로 설정하고 javascript를 사용하여 함수에서 픽업할 수 있습니다.이벤트 타겟에서 설정한 속성을 선택합니다.

    let currentTarget = event.target;
    let currentId = currentTarget.getAttribute('data-id');
    let currentValue = currentTarget.getAttribute('data-value');

언급URL : https://stackoverflow.com/questions/34350988/react-passing-parameter-via-onclick-event-using-es6-syntax