React-Native Button onPress 不起作用答案

【问题标题】：React-Native Button onPress not workingReact-Native Button onPress 不起作用
【发布时间】：2017-08-25 14:26:29
【问题描述】：

我正在尝试将函数 handleClick 绑定到我的按钮 onPress。但它不起作用。当我刷新页面时，我在没有单击按钮的情况下收到警报，在我关闭警报并单击按钮后，什么也没有发生。

我的代码是：

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick(){
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

我也收到了警告：

我做错了什么？

【问题讨论】：

你正在调用handleclick函数，当组件呈现你想要做的onPress={this.handleClick}所以这样它将是一个回调，并且只会在我触发onpress时运行该函数

标签： javascript reactjs react-native

【解决方案1】：

当它呈现为onPress={this.handleClick()}时，您正在调用handleClick

尝试onPress={this.handleClick}，将函数作为回调传递给它。

【讨论】：

【解决方案2】：

首先，您将单击处理程序定义为箭头函数。这样你就不需要再绑定函数了。你的函数会是这样的：

handleClick = () => {
    alert('Button clicked!');
}

然后像这样在<Button>标签中使用这个函数：

<Button
 onPress={this.handleClick}
 title="Click ME"
 color="blue"
/>

【讨论】：

【解决方案3】：

当 react-native 检测到点击事件并想要通知你时，它会调用 onPress 属性作为函数。所以你必须给onPress 提供一个函数，比如：

onPress={this.handleClick}

这将onPress 连接到handleClick 方法。但如果你想调用handleClick 中的其他方法并且你需要“this 对象”，你可以像这样传递handleClick 方法：

onPress={this.handleClick.bind(this)}

祝你好运

【讨论】：

【解决方案4】：

更新您的代码！你应该通过参考

<Button
       onPress={this.handleClick}
       title="Click ME"
       color="blue"
      />

【讨论】：

【解决方案5】：

你可以试试吗

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick=()=>{
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

【讨论】：

你做了什么改变，为什么它可以解决问题？

【解决方案6】：

You can also call the function like this: 
class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }
  handleClick(){
    alert('Button clicked!');
  }
    render(){
      return(
        <View>
          <Button
           onPress={()=>this.handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

【讨论】：

【解决方案7】：

我们应该传递一个函数引用而不是在渲染时直接调用它：

试试这个：

onPress={this.handleClick}

【讨论】：

【解决方案8】：

如果你在你的类范围之外定义你的函数，你也不要在你的处理函数中使用this关键字

喜欢

//function moved here
const handleClick = () => {
    alert('Button clicked!');
  }

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }
    render(){
      return(
        <View>
          <Button
           onPress={handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

【讨论】：