在與REDX形式的onSubmit事件處理程序中丟失6

我想用我的組件管理器來提交事件處理程序與REDX形式6.1.1，但在事件處理函數我得到"this" is undefined。這裏是我做的：在與REDX形式的onSubmit事件處理程序中丟失6

class ForgetPasswordForm extends Component { 
    xubmit (values) { 
    console.log(this); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <form onSubmit={ handleSubmit(this.xubmit) }> 
     ... 
    ); 
    }; 
}

我也試過() => handleSubmit(this.xubmit.bind(this))，並在React: this is null in event handler提到this.xubmit.bind(this)但他們沒有解決。

這裏是關於我的設置的詳細信息：

樣板：創反應，應用程序v.0.5
反應：v.15.3.2
終極版：v.3.6

來源

2016-11-08 Ali Qanavatian

handleSubmit.bind(this.xubmit)通過這種方式在handleSubmit,this指向this.xubmit。

我也建議你到read how bind works.

注：我知道只有JavaScript

來源

2016-11-08 06:47:32

我不知道爲什麼它變成'未定義'！： - \ –

它在'xubmit'裏面嗎？或在'渲染'？ –

在「xubmit」中，這是我的事件處理函數 –

既然你沒有提供你功能，我只能想象，你直接調用該函數傳入像handleClick (fn) { fn() }這樣你就可以訪問fn中的上下文。你也應該傳遞一個函數給事件處理程序。做這樣的事情，看看它的工作原理：

onSubmit={this.props.handleSubmit.bind(this.props.context, this.xubmit.bind(this))}

您需要發送父組件的背景下，以你的ForgetPasswordForm並綁定handleSubmit給它有權訪問父組件的情況下，爲了結合this.xubmit到this爲它不是undefined。

來源

2016-11-08 09:47:14 MahdiPOnline

你的自定義提交功能基本上是錯誤的，只是用這種方式編輯你的代碼。

class ForgetPasswordForm extends Component { 
xubmit = (values) => { 
    console.log(this); 
} 

}

的電話這種方式，

<form onSubmit={handleSubmit((values) => this.xubmit(values)) }>

來源

2016-11-08 11:27:33

必須使用class properties和箭頭功能一起

類屬性是stage-2

class ForgetPasswordForm extends Component { 
    xubmit = (values) => { 
    console.log(this); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return <form onSubmit={ handleSubmit(this.xubmit) }>; 
    }; 
}

Arrow功能綁定this的一部分功能

來源

2016-11-09 13:07:04 seyed

在與REDX形式的onSubmit事件處理程序中丟失6

回答

相關問題