每次选择 select 的不同选项时，如何在 redux-form 中捕获值？答案

【问题标题】：How to capture the value in redux-form every time when different option from select was chosen?每次选择 select 的不同选项时，如何在 redux-form 中捕获值？
【发布时间】：2019-01-01 09:56:33
【问题描述】：

我是 react 和 redux-form 的新手。我有一个表单，它使用从 API 获得的数据呈现选择字段选项。每当我选择一个选项时，它都会从选择字段中查询带有键值的新 API。然后我希望其他两个字段根据每次选择新选项时发生的新 API 查询来显示和设置它们的值。将值放在字段的占位符上仅显示该值，但在提交时不会捕获该值。我使用 redux-form-website-template 中的值对此进行了测试。它只显示选择字段中的键和值，而不显示其他字段。每次更改选择字段选项时，我应该怎么做才能捕获该值？形式化或格式化会完成这项工作吗？我试过 value={this.value} 并没有工作。

//All relevant imports 

class MyFormClass extends Components {
   componentDidMount() {
        //first query
        this.props.dispatch(getFoodAction())
   }

   onChange = (event) => {
        //second API query with the key value from select
        this.props.dispatch(getFoodByIDAction(event.target.value))
   }

   render() {
        const { handleSubmit, fruit } = this.props
        let food_list = this.props.food.map((food, index) => {
            return (
                <option value={ food.id } >
                    { food.name }   
                </option>
            )
        })

        return(
            <form onSubmit={ handleSubmit(this.submit) } >
                <div>
                   <Field 
                        value={this.value}
                        name="food" 
                        component="select"
                        onChange={this.onChange.bind(this)} >
                        {food_list}
                    </Field>
                    <div>
                        <label><b>Food Category</b> : </label>
                        <Field 
                            name="food_category"
                            component="input"
                            type="text"
                            placeholder={ food.category}
                        />
                    </div>
                    <div>
                        <label><b>Food Detail</b> : </label>
                        <Field 
                            name="food_detail"
                            component="textarea"
                            type="text"
                            placeholder={ food.detail}
                        />
                    </div>
                </div>
            </form>
        )
    }
}

const reduxFormFood = reduxForm({
    form: 'foodForm'
})(MyFormClass)

function mapStateToProps(state) {
    return { 
        food: state.foodreducer.food,
        foodbyid: state.foodbyidreducer.food
    }
}

export default connect(
    mapStateToProps, 
    { getFoodAction, getFoodByIDAction }
)(reduxFormFood );

【问题讨论】：

标签： reactjs react-redux redux-form

【解决方案1】：

最终我通过引用the redux-form initializefromstate example重写了整个组件，新的reducer和新的动作

【讨论】：