按钮未在反应组件中触发

Question

我是 React 新手，我不明白为什么简单按钮不起作用。

export default class PlayerList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      players: [],
      convocPlayers: []
    }
    this.sendConvoc = this.sendConvoc.bind(this)
  }

  async sendConvoc() {
    try {
      let data = this.state.convocPlayers;
      await axios.post('/players/convoc', {
        players: data
      });
    } catch (error) {
      alert(error)
    }
  }

  render() {
    return (
      <div>
          <PlayerForm addPlayer={(user) => this.addPlayer(user)}></PlayerForm>
        </div>
        <div className="flex items-center justify-between mt-8">
          <span className="text-3xl">Liste des joueurs</span>
          <PrimaryButton onClick={() => this.sendConvoc}>Envoyer la convocation</PrimaryButton>
        </div>
    )
  }
}

我的 PrimaryButton 组件：


export default class PrimaryButton extends React.Component {
  render () {
    return (
      <button type={this.props.type} onClick={() => this.onClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        {this.props.children}
      </button>
    )
  }
  
  onClick() {
    var clickFunction = this.props.onClick || null;
    if (clickFunction) {
      clickFunction()
    }
  }
}

当我点击“PrimaryButton”时，sendConvoc函数从未被触发，如果有人有解决方案，请先谢谢

Answer 1

您应该将 onClick 函数更改为 onClick={() => this.onClick()} 或只是 onClick={this.onClick}

Answer 2

我们必须理解为什么你的功能没有被触发。当我们指定一个事件时，即 onClick，React 希望我们传递一个函数而不是调用该函数。

✅ 正确 - 传递函数

 <PrimaryButton onClick={this.sendConvoc}>

 // passing an inline function
 <PrimaryButton onClick={() => this.sendConvoc()}>
 <PrimaryButton onClick={() => alert('hello')}>

对于内联函数，注意我们需要调用里面的函数，否则内联函数会return函数定义（不是调用函数）

❌ 不正确 - 调用函数

 <PrimaryButton onClick={this.sendConvoc()}>
 <PrimaryButton onClick={alert('hello')}>

对于您的情况，PrimaryButton 组件中的解决方案是在内联函数中调用函数。此外，我们可能不需要内联函数，这是一个更简单的解决方案。

// BEFORE
// the issue here is we forgot to call `this.onClick`, we return function definition of `this.onClick` here. 
<button type={this.props.type} onClick={() => this.onClick}

// AFTER
<button type={this.props.type} onClick={() => this.onClick()}

// or
<button type={this.props.type} onClick={this.onClick} // simpler

在PlayerList组件

// BEFORE
<PrimaryButton onClick={() => this.sendConvoc}>

// AFTER
<PrimaryButton onClick={() => this.sendConvoc()}>

// or
<PrimaryButton onClick={this.sendConvoc}>

按钮未在反应组件中触发

Button is not triggered in react component

javascript

reactjs