Dev/Javascript/React
Source Edit History
Handling Events
文章目录
点击这里访问站长的博客

tags: React, onClick, 额外参数, 获取 value

TL’DR

不使用 this

1
2
3
4
5
6
7
8
9
10
<button onClick={this.handleRemove} value={id} abc={id} data-bcd={id}>
    Remove
</button>

handleRemove(event) {
 remove(event.target.value); // 注意这个只能用来获取value
 remove(event.target.getAttribute('abc')) //这样会通过字符串的形式获取
 remove(event.target.dataset.bcd) //这样也会通过字符串的形式获取

}

使用 this

1
2
3
4
5
6

<button onClick={()=>this.f1(this, id)}>Delete Row</button>

f1 = (event, id){
&nbsp;&nbsp;&nbsp;&nbsp;...
}
1
2
3
4
5
6
7
8
9
10
/* 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){
&nbsp;&nbsp;&nbsp;&nbsp;...
}

React: Handling Events

几个要点：

  • React events are named using camelCase, rather than lowercase.
  • With JSX you pass a function as the event handler, rather than a string.

For example, the HTML:

1
2
3
<button onclick="activateLasers()">
  Activate Lasers
</button>

is slightly different in React:

1
2
3
<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.

防止默认事件的代码需要一些修正

1
2
3
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

In React, this could instead be:

1
2
3
4
5
6
7
8
9
10
11
12
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.

初始化的时候给事件管理器，DOM初始化之后就别去添加其他监听器了。

JQuery: …

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Welcome extends React.Component{
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);  //绑定一下事件到this
  }

  handleClick() {
    console.log(123)
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render(){
    return (
      <div onClick={this.handleClick}>  //这里记得要写一个attr，并且要注意大小写
       {(this.state.isToggleOn)?'A':'B'}, {this.props.name}
      </div>
    );
  }
}

Passing Arguments to Event Handlers

下方的ID代表对应数据编号, 既可以使用外部的循环Index.

这儿有点像是闭包, 区别在于是否将 event 传进去

1
2
3
4
5
6
<button onClick={(e) => this.deleteRow(arg1, arg2, e)}>Delete Row</button>

// 这一种没有传递 event, 但是问题不大
<button onClick={() => this.deleteRow(arg1, arg2)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, arg1, arg2)}>Delete Row</button>

两种模式类似

  1. 对于 Arrow Function 来说, 需要显式传入
  2. 对于 bind() 来说就不用了
  3. 另外如果 event 不重要的话不传其实也可以

来源： https://reactjs.org/docs/handling-events.html

Get attr ‘value’

注意以下情况情况没有直接传递任何参数, event 指向当前 event, 然后通过获取到这个 elem 再获取其他参数

1
2
3
4
5
6
7
8
9
10
<button onClick={this.handleRemove} value={id} abc={id} data-bcd={id}>
    Remove
</button>

handleRemove(event) {
 remove(event.target.value); // 注意这个只能用来获取value
 remove(event.target.getAttribute('abc')) //这样会通过字符串的形式获取
 remove(event.target.dataset.bcd) //这样也会通过字符串的形式获取

}