Taro 元素的事件处理和 DOM 元素的很相似。但是有一点语法上的不同:

Taro 事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串 (DOM 元素的写法)。 例如,传统的微信小程序模板:

Activate Lasers

Taro 中稍稍有点不同:

Activate Lasers

在 Taro 中另一个不同是你不能使用 catchEvent 的方式阻止事件冒泡。你必须明确的使用 stopPropagation。例如,阻止事件冒泡你可以这样写:

class Toggle extends React.Component {

constructor (props) {

super(props)

this.state = {isToggleOn: true}

}

onClick = (e) => {

e.stopPropagation()

this.setState(prevState => ({

isToggleOn: !prevState.isToggleOn

}))

}

render () {

return (

{this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}

)

}

}

向事件处理程序传递参数

通常我们会为事件处理程序传递额外的参数。例如,若是 id 是你要删除那一行的 id,以下两种方式都可以向事件处理程序传递参数:

Delete Row

当你通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面。

class Popper extends Component {

constructor () {

super(...arguments)

this.state = { name:‘Hello world!‘ }

}

// 你可以通过 bind 传入多个参数

preventPop (name, test, e) { //事件对象 e 要放在最后

e.preventDefault()

}

render () {

return

}

}

Taro 目前暂时不支持通过匿名函数传值,也不支持多层 lambda 嵌套。当你有传参需求时,请全部使用 bind 来处理。

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐