Question

我使用redux表单和redux将表单值推送到商店/状态。首先，当我将它作为不是React组件类的容器（INFORMATION COMPONENT）组件的道具传递给我时，我将表单组件中的状态定义为undefined，最后使用update函数来更新商店。我是React的新手，而redux形式让我失望

 // App Component


  class App extends Component {
    constructor(props) {
      super(props)
    }

    render() {
      return (
        <div className="App">
          <InformationFrom state={this.props}/>
        </div>
      );
    }
  }

  const mapStateToProps = (reduxState) => {
    return reduxState;
  }

  const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(actionCreators, dispatch);
  }

  export default connect(
    mapStateToProps, mapDispatchToProps
  )(App)





// InformationForm Component

    export default class InformationFrom extends React.Component {
        render() {
            return (
                <div>
                    {console.log("infoForm props >> ", this.props)}
                    <SimpleForm/>
                </div>
            )
        }
    }


// Form stateless function component


    const SimpleForm = props => {
        const { handleSubmit, pristine, reset, submitting } = props
        const state = this.props.state; // is undefined

        return (

            <div>
                { console.log("from state here >> ", this.props) }
                <form onSubmit={handleSubmit(this.updateStore(values,state))} name="InformForm">
                    <div>
                        <div>
                            <Field name="firstName" component={renderInput} type="text" placeholder="First Name" label={"First Name"} />
                            <Field name="lastName" component={renderInput} type="text" placeholder="Last Name" label={"Last Name"} />
                            <Field name="email" component={renderInput} type="text" placeholder="Email" label={"Email"} />
                        </div>
                    </div>

                    <div style={style.normal}>
                        <button type="submit" disabled={submitting}>
                            Submit
            </button>
                        <button type="button" disabled={submitting} onClick={reset}>
                            Clear Values
            </button>
                    </div>
                </form>

            </div>
        )
    }

    function updateStore(values, state){
    let newStore = {};

    newStore = {

    }


        return newStore;
    }

    const validate = values => {
        const errors = {}
        if (!values.firstName) {
            errors.firstName = "Required!"
        }
        return errors;
    }

    const style = {
        normal: {
            margin: '10px'
        }
    }

    export default reduxForm({
        form: 'simple', // a unique identifier for this form
        destroyOnUnmount: false,
        validate
    })(SimpleForm)

Answer 1

您不是在InformationFrom中将道具传递给SimpleForm，因此需要更新

export default class InformationFrom extends React.Component {
        render() {
            return (
                <div>
                    {console.log("infoForm props >> ", this.props)}
                    <SimpleForm/>
                </div>
            )
        }
    }

到

<SimpleForm  {...this.props} />

并使用connect从Exportx导出状态

export default connect((state)=>state)( reduxForm({
        form: 'simple', // a unique identifier for this form
        destroyOnUnmount: false,
        validate
    })(SimpleForm) );

如何使用redux表单值更新redux存储

1 个答案: