我一直看到说使用=>或.bind(this)的答案,但这些解决方案均无效。
import React, { Component } from 'react'; import { View, Text, TextInput, StyleSheet } from 'react-native'; export default class MyWeatherApp extends Component { constructor(props) { super(props); this.state = {}; } getInitialState() { return { zip: '', forecast: null, }; } _handleTextChange(event) { var zip = event.nativeEvent.text; this.setState({zip: zip}); }
解:
_handleTextChange = (event) => { var zip = event.nativeEvent.text; this.setState({zip: zip}); alert('click'); }
当你extend React.Component与ES2015类语法,你需要你的动作处理程序绑定到你的类的上下文。
extend
React.Component
试试这个: onChange={e => _handleTextChange(e)}
onChange={e => _handleTextChange(e)}
通常,最好不要在其中使用箭头函数或bind方法,render因为它会在每次render调用时生成该函数的新副本。将函数声明移到class constructor。
bind
render
class constructor
我个人更喜欢在这种情况下使用箭头函数作为类属性
class MyClass extends React.Component { handleClick = () => { // your logic }; render() { return ( <button onClick={this.handleClick}>Click me</button> ); } }
它不是ES2015规范的一部分,但babel stage-0预设支持此语法
您可以在本文中的React中阅读有关上下文绑定的更多信息