按鈕鏈接不調用處理程序作出反應

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!") ...不知道爲什麼

UsersContainer （我會重構這個代碼在try/catch語句是這樣的setState FYI消除重複）

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

我認爲你的格式不正確bind()UserContainer，應該是this.handleResetPassword = this.handleResetPassword.bind(this)。