在redux中处理多个输入值,可以通过以下步骤实现:
combineReducers
函数,将所有输入字段的reducer合并成一个根reducer。connect
函数,将需要使用输入字段的组件连接到Redux的state,并将对应的输入字段传递给组件。下面是一个简单的示例:
首先,定义初始状态和action类型:
const initialState = {
input1: '',
input2: '',
};
const UPDATE_INPUT_1 = 'UPDATE_INPUT_1';
const UPDATE_INPUT_2 = 'UPDATE_INPUT_2';
然后,创建action创建函数:
const updateInput1 = (value) => {
return {
type: UPDATE_INPUT_1,
payload: value,
};
};
const updateInput2 = (value) => {
return {
type: UPDATE_INPUT_2,
payload: value,
};
};
接下来,创建reducer:
const input1Reducer = (state = initialState.input1, action) => {
switch (action.type) {
case UPDATE_INPUT_1:
return action.payload;
default:
return state;
}
};
const input2Reducer = (state = initialState.input2, action) => {
switch (action.type) {
case UPDATE_INPUT_2:
return action.payload;
default:
return state;
}
};
然后,合并reducers:
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
input1: input1Reducer,
input2: input2Reducer,
});
最后,在组件中使用输入字段的值:
import { connect } from 'react-redux';
class MyComponent extends React.Component {
render() {
const { input1, input2, updateInput1, updateInput2 } = this.props;
return (
<div>
<input value={input1} onChange={(e) => updateInput1(e.target.value)} />
<input value={input2} onChange={(e) => updateInput2(e.target.value)} />
</div>
);
}
}
const mapStateToProps = (state) => {
return {
input1: state.input1,
input2: state.input2,
};
};
const mapDispatchToProps = (dispatch) => {
return {
updateInput1: (value) => dispatch(updateInput1(value)),
updateInput2: (value) => dispatch(updateInput2(value)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
这样,你就可以在Redux中处理多个输入值了。对应的输入字段会通过Redux的state进行管理,并且可以在组件中使用Redux提供的connect
函数连接到state和action创建函数。
领取专属 10元无门槛券
手把手带您无忧上云