React Native点击按钮向WebView传值报错：this.input未定义

嘿，这个问题我之前也碰到过！核心原因是sendData方法的this指向不对——当你直接把this.sendData传给Button的onPress时，这个方法执行时的this已经不是你的HtmlRender组件实例了，自然找不到this.input；而componentDidMount是React的生命周期方法，React会自动帮它绑定正确的组件实例this，所以能正常工作。

下面给你三种可行的解决方案，选一种你习惯的就行：

方案1：在构造函数中手动绑定this #

给组件添加构造函数，把sendData方法的this绑定到组件实例：

export default class HtmlRender extends Component { 
  constructor(props) {
    super(props);
    // 绑定this到组件实例
    this.sendData = this.sendData.bind(this);
  }

  sendData() { 
    this.input.postMessage(data); 
  } 

  componentDidMount(){ 
    this.input.postMessage(data); 
  } 

  render(){ 
    // 其余代码不变
  }
}

方案2：用箭头函数定义sendData方法 #

箭头函数会自动捕获当前上下文的this，直接用这种方式定义方法就不用手动绑定了：

export default class HtmlRender extends Component { 
  // 用箭头函数定义，自动绑定组件实例的this
  sendData = () => { 
    this.input.postMessage(data); 
  } 

  componentDidMount(){ 
    this.input.postMessage(data); 
  } 

  render(){ 
    // 其余代码不变
  }
}

方案3：在onPress中用箭头函数包裹调用 #

不修改sendData方法，而是在Button的onPress里用箭头函数来调用它，这样也能确保this指向组件实例：

<Button onPress={() => this.sendData()}>
  <Text> Data </Text>
</Button>

另外还要提醒你：确保data变量是已经定义好的哦，比如可以在组件里声明一个具体的值，比如const data = "要传递给WebView的内容";

内容的提问来源于stack exchange，提问作者Milind Modi