Как я могу использовать реквизит для автоматического заполнения редактируемых полей редукционной формы в React?

Я новичок в React, поэтому я попытался показать здесь как можно больше кода, чтобы, надеюсь, понять это! По сути, я просто хочу заполнить поля формы свойствами объекта, который я получил из другого API. Объект хранится в редьюсере автозаполнения. Например, я хотел бы заполнить ввод с помощью autoFill.volumeInfo.title, где пользователь может изменить значение перед отправкой, если захочет.

Я использовал mapDispatchtoProps из создателя действия autoFill, но this.props.autoFill по-прежнему отображается как неопределенный в компоненте FillForm. Я также смущен тем, как затем снова использовать реквизит для отправки формы. Спасибо!

Мой редуктор:

import { AUTO_FILL } from '../actions/index';

export default function(state = null, action) {
  switch(action.type) {
  case AUTO_FILL:
      return action.payload;
  }

  return state;
}

Создатель действия:

export const AUTO_FILL = 'AUTO_FILL';

export function autoFill(data) {

  return {
    type: AUTO_FILL,
    payload: data
  }
}

Вызов создателя действия автозаполнения:

class SelectBook extends Component {
   render() {

     return (

      ....

     <button
       className="btn btn-primary"
       onClick={() => this.props.autoFill(this.props.result)}>
       Next
     </button>
    );
   }
}

....

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ autoFill }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectBook);

И вот фактическая форма, в которой лежат проблемы:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { createBook } from '../actions/index;

class FillForm extends Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  onSubmit(props) {
   this.props.createBook(props)
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() { 

    const { fields: { title }, handleSubmit } = this.props;

    return (

       <form {...initialValues} onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <input type="text" className="form-control" name="title" {...title} />
          <button type="submit">Submit</button>
       </form>
      )
   }

  export default reduxForm({
    form: 'AutoForm',
    fields: ['title']
  },
  state => ({
    initialValues: {
      title: state.autoFill.volumeInfo.title
    }
  }), {createBook})(FillForm)

reactjs forms react-redux redux-form react-redux-form
person nattydodd    schedule 05.03.2017    source источник
comment
Вы сказали, что this.props.autoFill не определен в FillForm, но я не вижу, чтобы он там использовался. Вы действительно имели в виду в SelectBook?   -  person Special Character    schedule 05.03.2017
comment
@BrandonRoberts Я добавил здесь новый вопрос с новым кодом / новой проблемой ... может быть, он немного понятнее. Спасибо! stackoverflow.com/questions/42624225 /   -  person nattydodd    schedule 06.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, вы смешиваете декораторы connect и reduxForm в фактическом компоненте формы. В настоящее время ваш код выглядит так (аннотации добавлены мной):

export default reduxForm({
  // redux form options
  form: 'AutoForm',
  fields: ['title']
},

// is this supposed to be mapStateToProps?
state => ({
  initialValues: {
    title: state.autoFill.volumeInfo.title
  }
}),
/// and is this mapDispatchToProps?
{createBook})(FillForm)

Если это так, то исправление должно быть таким же простым, как использование декоратора connect, как и должно быть (я также рекомендую разделить это свойство подключения на свои собственные переменные, чтобы свести к минимуму подобные путаницы):

const mapStateToProps = state => ({
  initialValues: {
    title: state.autoFill.volumeInfo.title
  }
})

const mapDispatchToProps = { createBook }

export default connect(mapStateToProps, mapDispatchToProps)(
  reduxForm({ form: 'AutoForm', fields: ['title'] })(FillForm)
)

Надеюсь это поможет!

person jakee    schedule 06.03.2017