按钮 Link 不在 React 中调用处理程序

Question

我正在尝试使用 React Bootstrap Button Link 来调用处理程序

我不确定为什么单击时没有调用我的处理程序：

import React, { Component } from 'react'
import { HelpBlock, Button, Table } from 'react-bootstrap'

export default class Users extends Component {
  render() {
    const { users } = this.props
    return (<span><UserList list={users} /></span>)
  }
}

export class UserList extends Component {
  render(){
    const { handleResetPassword, list, resetPasswordError } = this.props
    const userList = list && list.map(
        (user, i) =>
          <User
            handleResetPassword={handleResetPassword}
            key={i}
            resetPasswordError={resetPasswordError}
            user={user}
          />)

    return(<Table responsive>
      <thead>
        <tr>
          <th>First</th>
          <th>Last</th>
        </tr>
      </thead>
      <tbody>{userList}</tbody>
    </Table>)
  }
}

export class User extends Component {
  render() {
    const { uuid, firstName, lastName, email } = this.props.user

    return (
      <tr>
        <td>{firstName}</td>
        <td>{lastName}</td>
        <td>
         <HelpBlock disabled={this.props.resetPasswordError ? true : false}>{this.props.resetPasswordError}</HelpBlock>
          <Button
            bsStyle='link'
            onClick={this.props.handleResetPassword}
          >
            reset password
          </Button></td>
      </tr>
    )
  }
}

我还注意到在页面加载时，由于某种原因它会自动点击我的处理程序，我什至没有点击按钮。我看到 console.log("handleResetPassword invoked!") 被击中...不知道为什么

用户容器 （我将重构此代码以删除重复，因此仅供参考 try/catch 中的 setState）

import { connect } from 'react-redux'
import React, { Component } from 'react'

import * as UserAsyncActions from '../actions/Users/UserAsyncActions'
import Users from '../components/Users/UserList'

class UsersContainer extends Component {
  constructor(props){
    super(props)

    this.state = {
      resetPasswordError: null
    }

    this.handleResetPassword = this.handleResetPassword(this)
  }
  async componentDidMount() {
    await this.props.allUsers(this.props.token)
  }

  async handleResetPassword() {
    // e.preventDefault()
    console.log("handleResetPassword invoked!")
    try {
      await this.props.resetUserPassword()
      if(this.props.hasResetPassword){
        // show successful message (set message here)
        return
      }
    }
    catch(err) {
      this.setState({
        resetEmailValidationState: 'error',
        resetPasswordError: !this.state.hasResetPassword && 'reset failed'
      })
    }

    this.setState({
      resetEmailValidationState: 'error',
      resetPasswordError: !this.state.hasResetPassword &&
      'reset failed'
    })
  }

  render(){
    return (
      <Users
        handleResetPassword={this.handleResetPassword}
        resetPasswordError={this.state.resetPasswordError}
        users={this.props.users}
      />)
  }

}
export const mapStateToProps = state => ({
  isRequestingAllUsers: state.user.isRequestingAllUsers,
  hasResetPassword: state.user.hasResetPassword,
  users: state.user.users,
  token: state.auth.token
})

export const mapDispatchToProps = {
  allUsers: UserAsyncActions.allUsers,
  resetUserPassword: UserAsyncActions.resetPasssord
}

export { Users }
export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer)

Answer 1

我认为您在 UserContainer 中的 bind() 格式不正确，应该是 this.handleResetPassword = this.handleResetPassword.bind(this)。

按钮 Link 不在 React 中调用处理程序

Button Link Does Not Invoke Handler in React

javascript

reactjs

react-bootstrap

react-redux