爲什麼我在reactJs中從Redux表單獲得空值？

我不明白爲什麼我點擊提交按鈕時會得到一個空值。我得到：You have submitted: {}。當我點擊Reset data -button時，問題是一樣的。根據我的理解，結果應該是{"firmName":"test"}。我無法讓它工作。任何幫助或建議是非常感激。爲什麼我在reactJs中從Redux表單獲得空值？

class FirmDataTab extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      firmName: 'test' 
     }; 
     this.reset = this.reset.bind(this); 
    } 

    reset() { 
     this.setState = { 
      firmName: '' 
     }; 
    } 

    render() { 
     const { handleSubmit } = this.props; 
     return(
      <form onSubmit={ handleSubmit }> 
       <div className="jumbotron"> 
        <div> 
         <label>Firm name</label> 
         <div style={{marginTop: -22, marginLeft: 80}}> 
          <input 
           name="firmnname" 
           type="text" 
           defaultValue={this.state.firmName} /> 
         </div> 
        </div> 
        <div> 
         <FormGroup> 
          <Col smOffset={2} sm={10}> 
           <button 
            type="submit" 
            className="btn btn-info" style={{marginLeft: -40, marginRight: 20, marginTop: 10}}> Submit </button> 
           <button onClick={this.reset}> Reset data </button> 
          </Col> 
         </FormGroup> 
        </div> 
       </div> 
      </form> 

     ); 
    } 
} 

FirmDataTab .propTypes = { 
    handleSubmit: PropTypes.func.isRequired 
}; 

export default reduxForm({ 
    form: 'TestForm' 

})(FirmDataTab);

來源

2017-05-21 carl

defaultValue道具不反映狀態變化。您應該使用value替代。檢查the doc瞭解更多詳情。

來源

2017-05-21 00:45:05

'@Phi Nguyen'我改成了'value'，但仍然是同樣的問題。另外，我得到：'失敗的形式propType：你提供了一個'值'道具的表單字段沒有'onChange'處理程序。這將呈現一個只讀字段。如果該字段應該是可變的，則使用'defaultValue'。否則，請設置「onChange」或「readOnly」。檢查'FirmDataTab'的渲染方法。 – carl

@carl當輸入值改變時，你應該創建一個事件處理程序。檢查這個例子。 https://facebook.github.io/react/docs/lifting-state-up.html –

你在這裏所犯的第一個錯誤是當地的國家管理。使用redux表單時，您需要將表單與全局應用程序狀態進行連接。您不能再使用本地setState。

以下是工作解決方案。在提交時我已經記錄了輸入值。您可以使用相同的值調用您的動作創建者以將數據保存到後端。重置和其他情況也一樣。我在這裏評論過他們。

import React, { Component } from 'react'; 
import { Field, reduxForm, formValueSelector } from 'redux-form'; 

class UserNameNew extends Component { 
    constructor(props) { 
     super(props); 
    } 

    onSubmit(values) { 
     console.log(values); 
     // Call the action creator which is responsible for saving data here. 
    } 

    reset() { 
     // call the action creator to reset the state here. 
    } 

    render() { 
     const { handleSubmit } = this.props; 
     return(
      <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }> 
       <div> 
        <div> 
         <label>First Name</label> 
         <div style={{marginTop: -22, marginLeft: 80}}> 
          <Field name="firstName" component="input" type="text" /> 
         </div> 
        </div> 
        <div> 
         <button type="submit" className="btn btn-primary">Submit</button> 
        </div> 
       </div> 
      </form> 

     ); 
    } 
} 

export default reduxForm({ 
    form: 'UserNameForm' 

})(UserNameNew);

希望這會有所幫助。快樂的編碼！

來源

2017-05-21 07:27:43

爲什麼我在reactJs中從Redux表單獲得空值？

回答

相關問題