在Redux中以编程方式更新表单字段值,可以通过以下步骤实现:
const initialState = {
username: '',
password: '',
email: ''
};
const updateFormField = (fieldName, value) => {
return {
type: 'UPDATE_FORM_FIELD',
fieldName,
value
};
};
const formReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_FORM_FIELD':
return {
...state,
[action.fieldName]: action.value
};
default:
return state;
}
};
connect
函数将表单字段的值与Redux的store进行连接。这样,你就可以通过props访问到表单字段的值。updateFormField
action来更新表单字段的值。例如:import { connect } from 'react-redux';
import { updateFormField } from './actions';
class MyForm extends React.Component {
handleInputChange = (event) => {
const { name, value } = event.target;
this.props.updateFormField(name, value);
};
render() {
return (
<form>
<input
type="text"
name="username"
value={this.props.username}
onChange={this.handleInputChange}
/>
<input
type="password"
name="password"
value={this.props.password}
onChange={this.handleInputChange}
/>
<input
type="email"
name="email"
value={this.props.email}
onChange={this.handleInputChange}
/>
</form>
);
}
}
const mapStateToProps = (state) => {
return {
username: state.username,
password: state.password,
email: state.email
};
};
const mapDispatchToProps = {
updateFormField
};
export default connect(mapStateToProps, mapDispatchToProps)(MyForm);
通过以上步骤,你就可以以编程方式更新Redux表单中的字段值了。每当表单字段的值发生变化时,Redux的store会自动更新,并且组件会重新渲染以反映最新的值。
领取专属 10元无门槛券
手把手带您无忧上云