React 基础 - 将 Props 传递给 Function

Question

I am very new to React so please forgive me if this is very basic stuff.

I have a component that renders the following (there could be 100s of this on a page)

<a onClick={this.handlePropChange} propRef={this.props.proposal.PROPREF} >View</a>  

When i click the button i want to load a modal and pass through the value of propRef to a modal component (so i can then use some API calls to access information relating to that proposal).

handlePropChange(event) {
    alert(event.target.propRef);
    $('#proposalModal').modal('show');
}

Can someone tell me what i am doing wrong? Like i said i know this is basic but i'm struggling today.

Answer 1

2 solutions:

• Using a data attribute

<a onClick={this.handlePropChange} data-prop-ref={this.props.proposal.PROPREF}>
  View
</a>

handlePropChange(event) {
  alert(event.target.dataset.propRef);
  ...
}

• Passing propRef as a parameter of handlePropChange function

<a onClick={() => this.handlePropChange(this.props.proposal.PROPREF)}>
  View
</a>

handlePropChange(propRef) {
  alert(propRef);
  ...
}