Redux表單在OnSubmit處理程序中返回代理

Question

我嘗試運行示例代碼。

<form onSubmit={values => console.log("========>", values)}> 
    <div> 
     <label htmlFor="firstName">First Nameeee</label> 
     <Field name="firstName" component="Input" type="text"/> 
    </div> 
    <div> 
     <label htmlFor="lastName">Last Name</label> 
     <Field name="lastName" component="Input" type="text"/> 
    </div> 
    <div> 
     <label htmlFor="email">Email</label> 
     <Field name="email" component="Input" type="email"/> 
    </div> 
    <button type="submit">Submit</button> 
    </form> 

但是，當我處理onSubmit事件時，參數值返回一個代理服務器而不是帶有輸入值的對象。

//Console.log output 
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: Event, type: "submit"…} 

Answer 1

嘗試this.props.handleSubmit(values => console.log("========>", values))

代替values => console.log("========>", values)

Answer 2

你應該把它包裝成handleSubmit功能（它是由終極版形式提供），像這樣：

render() { 
    return (
     <form onSubmit={this.props.handleSubmit(values => console.log("========>", values))}> 
      <div> 
      <label htmlFor="firstName">First Nameeee</label> 
      <Field name="firstName" component="Input" type="text"/> 
      </div> 
      <div> 
      <label htmlFor="lastName">Last Name</label> 
      <Field name="lastName" component="Input" type="text"/> 
      </div> 
      <div> 
      <label htmlFor="email">Email</label> 
      <Field name="email" component="Input" type="email"/> 
      </div> 
     <button type="submit">Submit</button> 
     </form> 
    ); 
} 

Answer 3

對於那些使用redux的人，請確保您將onSubmit映射到您的表單組件，而不是映射到handleSubmit。

你可能會問什麼區別？

handleSubmit是在redux形式建立的道具，它注入與包裝你的香草反應形式與REDX形式reduxForm()。瞭解更多關於在這裏：​​https://redux-form.com/7.2.3/docs/api/props.md/

onSubmit是道具它將調用它的完成做驗證，內容十分重要後。基本上確保您通過onSubmit而不是通過handleSubmit將您的自定義業務邏輯傳遞給組件，否則您會得到這個神祕的代理對象，並且變得困惑一段時間。