如何使用道具自動填充React中可編輯的redux-form字段？

我是React的新手，所以我試圖在這裏展示儘可能多的代碼，希望能夠解決這個問題！基本上我只想從我從另一個API獲取的對象中填寫表單字段。該對象存儲在autoFill減速器中。例如，我想用autoFill.volumeInfo.title填充輸入，用戶可以在提交之前更改值，如果他們想要的話。如何使用道具自動填充React中可編輯的redux-form字段？

我使用了autoFill動作創建者的mapDispatchtoProps，但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)

來源

2017-03-05 nattydodd

你說「this.props.autoFill」在FillForm中是未定義的，但我沒有看到它在那裏使用。你真的在選擇SelectBook嗎？ –

@BrandonRoberts我在這裏添加了一個新的問題，新代碼/新問題......也許它有點更清晰。謝謝！ http://stackoverflow.com/questions/42624225/how-to-export-redux-form-field-component – nattydodd

我認爲你在實際的表單組件中混合了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) 
)

希望這有助於！

來源

2017-03-06 21:24:01 jakee

謝謝！是的，解決了他們的問題:) – nattydodd

如何使用道具自動填充React中可編輯的redux-form字段？

回答

相關問題