如何使用道具自动填充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字段？

回答

相关问题