Refact에서 편집 가능한 redux-form 필드를 자동 채우기 위해 소품을 어떻게 사용할 수 있습니까?

Question

나는 반응하기에 새로운데, 가능한 한 많은 코드를 보여 주려고 노력했다. 기본적으로 나는 다른 API에서 가져온 객체의 속성으로 양식 필드를 채우고 싶습니다. 객체는 자동 채우기 축소기에 저장됩니다. 예를 들어 autoFill.volumeInfo.title을 사용하여 입력 내용을 채우고 싶습니다. 사용자가 원하는 경우 제출하기 전에 값을 변경할 수 있습니다.

autoFill 액션 작성자에서 mapDispatchProps를 사용했지만 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) 

Answer 1

실제 폼 구성 요소에 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) 
) 

희망이 있습니다!