未被Redux更改的输入字段值

Question

我有一个简单的输入字段在我的组件连接到存储与Redux thunk

import React, {Component} from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {enterQuantity} from "../../../../store/products.actions";
class SingleProduct extends Component {
render(){
const basketDaysQuantity = this.props.basketDaysQuantity;
return(
<input id="quantity"  type="number" onChange={e => {enterQuantity(e.target.value); console.log(e.target.value)}} value={basketDaysQuantity} />
)
}
}
const mapStateToProps = state => ({
basketDaysQuantity: state.basket.basketDaysQuantity
})
const mapDispatchToProps = (dispatch)  => {
return {
enterQuantity: bindActionCreators(enterQuantity, dispatch)
}
}

我有产品。Actions文件，带有转发动作到存储

的函数

export const enterQuantity = value => dispatch => {
dispatch({type: ON_QUANTITY_CHANGE, payload: value})
}

和篮子。存储输入值的Reducer

const initialState = {
basketDaysQuantity: 1
};
const basketReducer = (state = initialState, action) => {
switch(action.type) {
case ON_QUANTITY_CHANGE:
return {
...state,
basketDaysQuantity: action.payload
}
default:
return state;
}
};
export default basketReduce

但是对输入字段的更改没有反映出来，并且所有内容都是连接的。

有人能帮忙吗?

Answer 1

看起来你没有得到正确的enterQuantity函数，你必须从道具中得到它，试试这个:

import React, {Component} from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {enterQuantity} from "../../../../store/products.actions";
class SingleProduct extends Component {

render(){
const {basketDaysQuantity, enterQuantity} = this.props;

return(
<input 
id="quantity"  
type="number" 
onChange={e => {enterQuantity(e.target.value);            
console.log(e.target.value)}} value={basketDaysQuantity} />
)
}
}

const mapStateToProps = state => ({
basketDaysQuantity: state.basket.basketDaysQuantity
})

const mapDispatchToProps = (dispatch)  => {
return {
enterQuantity: bindActionCreators(enterQuantity, dispatch)
}
}