为什么我在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表单获得空值？

回答

相关问题