每次选择 select 中的不同选项时，如何以 redux 形式捕获值？

Question

我是 React 和 redux-form 的新手。我有一个表单，它使用从 API 获得的数据呈现 select 字段选项。每当我选择一个选项时，它都会使用 select 字段中的键值查询新的 API。然后我希望其他两个字段显示并根据新的 API 查询设置它们的值，每次我选择新选项时都会发生这种情况。将值放在字段的占位符上只会显示该值，但不会在提交时捕获该值。我通过使用来自 redux-form-website-template 的值来测试它。它只显示 select 字段的键和值，不显示其他字段。每次更改 select 字段选项时，我应该怎么做才能捕获值？形式化或格式化会完成这项工作吗？我试过 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 );

Answer 1

最终我通过引用the redux-form initializefromstate example

重写了整个组件，新的reducer和新的action

每次选择 select 中的不同选项时，如何以 redux 形式捕获值？

How to capture the value in redux-form every time when different option from select was chosen?

reactjs

redux-form

react-redux