Как обновить избыточный магазин значениями избыточной формы - PullRequest
Новая
       21

Как обновить избыточный магазин значениями избыточной формы

0 голосов
/ 02 мая 2018

Я использую избыточные формы и избыточность, чтобы переместить значения формы в хранилище / состояние. Во-первых, я получаю состояние как неопределенное в компоненте формы, когда передаю его как реквизит из компонента контейнера (INFORMATION COMPONENT), который не является классом компонента React, и, наконец, использую функцию обновления для обновления хранилища. Я новичок в React, и излишняя форма отбрасывает меня 

 // 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)

1 Ответ

0 голосов
/ 02 мая 2018

Вы не передаете реквизиты SimpleForm в InformationFrom, поэтому необходимо обновить 

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

до 

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

и Экспорт с подключением, чтобы получить состояние из избыточного числа 

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