reactjs - 每次选择来自 select 的不同选项时，如何捕获 redux-form 中的值？

问题描述

我是反应和 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 );

标签： reactjsreact-reduxredux-form

reactjs - 每次选择来自 select 的不同选项时，如何捕获 redux-form 中的值？

问题描述

解决方案

推荐阅读