Reactjs 如何在每次选择与select不同的选项时捕获redux表单中的值？

我是一个新的反应和重复形式。我有一个表单，它使用从API获取的数据呈现选择字段选项。每当我选择一个选项时，它就会从select字段查询带有键值的新API。然后，我希望显示另外两个字段，并根据每次选择new option时发生的新API查询设置它们的值。将值放置在字段的占位符上仅显示值，但在提交时不会捕获值。我使用redux表单网站模板中的值来测试这一点。它仅显示“选择”字段中的键和值，而不显示其他字段。每次更改“选择字段”选项时，为了捕获值，我应该做些什么？这项工作是形式化还是形式化？我尝试了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 );

//所有相关导入
类MyFormClass扩展组件{
componentDidMount（）{
//第一个问题
this.props.dispatch（getFoodAction（））
}
onChange=（事件）=>{
//使用select中的键值的第二个API查询
this.props.dispatch（getFoodByDaction（event.target.value））
}
render（）{
const{handleSubmit，fruit}=this.props
让食物列表=this.props.food.map（（食物，索引）=>{
返回(
{food.name}
)
})
返回(
{食物清单}
食物类别：
食物详情：
)
}
}
const reduxFormFood=reduxForm({
表格：'foodForm'
})（MyFormClass）
函数MapStateTops（状态）{
返回{
食物：国家，食品生产者，食品，
foodbyid:state.foodbydreducer.food
}
}
导出默认连接(
MapStateTops，
{getFoodAction，getFoodByAction}
)（reduxFormFood）；

最终，我通过引用重写了整个组件、新减速器和新操作