Tags: React, 传递, 额外参数, extra, arguments, 事件处理, event handling
this
binding
<button onClick={()=>this.f1(this, id)}>Delete Row</button>
f1 = (event, id){
……
}
/* binding is important */
this.function = this.deleteRow.bind(this);
<button onClick={(e) => this.deleteRow(id,e)}>Delete Row</button>
/* event is unnecessary */
f1 = (id, event){
……
}
this
binding
Not recommended
<button onClick={this.handleRemove} value={id} abc={id} data-bcd={id}>
Remove
</button>
handleRemove(event) {
remove(event.target.value);
remove(event.target.getAttribute('abc'))
remove(event.target.dataset.bcd)
}
Some notes:
camelCase
, rather than lowercase
.For example, the HTML:
<button onclick="activateLasers()">
Activate Lasers
</button>
is slightly different in React:
<button onClick={activateLasers}>
Activate Lasers
</button>
Another difference is that you cannot return false
to prevent default behavior in React. You must call preventDefault
explicitly.
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
In React, this could instead be:
function ActionLink() {
function handleClick(e) {
e.preventDefault(); // must be called implicitly
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
When using React you should generally not need to call addEventListener
to add listeners to a DOM element after it is created.
Instead, just provide a listener when the element is initially rendered.
class Welcome extends React.Component{
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this); // bind the event to this
}
handleClick() {
console.log(123)
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render(){
return (
<div onClick={this.handleClick}> // bind the onClick event
{(this.state.isToggleOn)?'A':'B'}, {this.props.name}
</div>
);
}
}
<button onClick={(event) => this.deleteRow(arg1, arg2, e)}>Delete Row</button>
// This example do not pass the event
<button onClick={() => this.deleteRow(arg1, arg2)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, arg1, arg2)}>Delete Row</button>
For below solution we do not pass any arguments, we may reach the DOM through event to get extra attributes
<button onClick={this.handleRemove} value={id} abc={id} data-bcd={id}>
Remove
</button>
handleRemove(event) {
remove(event.target.value); // only value attribute can be reached directly
remove(event.target.getAttribute('abc')) // getAttribute will ALWAYS return value in 'String' type
remove(event.target.dataset.bcd) // Still, will get value as String
}