Question

我正在尝试将函数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> 
        );
    }
}

我也收到了警告：

我做错了什么？

Answer 1

您正在调用handleClick，因为您有onPress={this.handleClick()}

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

Answer 2

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

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

然后在<Button>标签中使用此功能，如下所示：

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

Answer 3

当react-native检测到click事件并想要通知您时，它会将onPress prop调用为函数。所以你必须给onPress道具提供一个功能，如：

onPress={this.handleClick}

这会将onPress与handleClick方法联系起来。但如果你想调用handleClick中的其他方法，你需要＆＃34; this对象＆＃34;您可以像这样传递handleClick方法：

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

祝你好运

Answer 4

更新您的代码！你应该传递一个参考

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

Answer 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> 
        );
    }
}

Answer 6

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

尝试一下：

onPress={this.handleClick}

Answer 7

如果您在类范围之外定义函数，也不要在处理程序函数中使用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> 
        );
    }
}

React-Native Button onPress不工作

7 个答案: