Question

我是新来的反应者，并且需要重新形式。我有一个使用从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 );

Answer 1

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

重写了整个组件，新的reducer和新的动作。

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

1 个答案: