一、事件绑定的几种方式

Rax / React 中如果要绑定事件的几种方式和优缺点:

1、内敛绑定

不建议,重复 bind 问题

<Dom onClick={this.clickHandle.bind(this)}>按钮</Dom>

2、匿名函数调用

不建议,依旧是重复声明的问题

<Dom onClick={e => {this.clickHandle(e)}}>按钮</Dom>

3、constructor 中绑定

constructor(props){
    super(props);
    this.clickHandle = this.clickHandle.bind(this);
}
clickHandle(){}
// 省略其他
<Dom onClick={this.clickHandle}>按钮</Dom>

4、箭头函数声明

这种方式不需要在 constructor 中绑定 this,因为声明的时候,已经绑定

clickHandle = () => {

}
<Dom onClick={this.clickHandle}>按钮</Dom>

二、参数传递问题

一般参数传递也有下面几种方法:

1、内联 bind

clickHandle = (text) => {
  alert(text);
}
<Dom onClick={this.clickHandle.bind(this,'text')}>按钮</Dom>

这种方式还是重复 bind 的问题

2、通过匿名函数

Touchable onPress={()=>{this.clickHandle('text')}}>
  <Text>按钮</Text>
</Touchable>

一样重复声明

3、通过返回匿名函数的包装

声明函数的时候,参数就是需要的参数,但是方法返回一个匿名函数,里面处理正常的逻辑即可

  clickHandle = (text) => {
    return () => {
      alert(text);
    }
  }

在 render 中使用事件处理

  render() {
    return (
      <View style={styles.app}>
       <Touchable onPress={this.clickHandle("text")}>
         <Text>按钮</Text>
       </Touchable>
      </View> 
    );
  }

三、较完美解决方法

import {createElement, Component} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Touchable from 'rax-touchable';
import styles from './App.css';

class App extends Component {
  constructor(props){
    super(props);
    
  }
  clickHandle = (text) => {
    return () => {
      alert(text);
    }
  } 
  render() {
    return (
      <View style={styles.app}>
       <Touchable onPress={this.clickHandle("text")}>
         <Text>按钮</Text>
       </Touchable>
      </View> 
    );
  }
}

export default App;