javascript - 使用 React Rudux 更改输入值
问题描述
我正在使用 react redux 创建一个 CRUD 来学习反应。
但是我不能用 react redux 改变输入值。
这是我的form.js
class UsuarioForm extends Component {
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Nome</Label>
<Input type="text" id="nome" value={this.props.usuario.Nome} placeholder="Informe o nome" />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Usuário</Label>
<Input type="text" id="ccnumber" value={this.props.usuario.Login} placeholder="Informe o login" required />
</FormGroup>
</Col>
</Row>
<Button type="submit" size="sm" color="primary">
<FontAwesomeIcon icon="check" /> Gravar
</Button>
<Button type="button" size="sm" color="danger" onClick={this.voltar.bind(this)}>
<FontAwesomeIcon icon="arrow-left" /> Voltar
</Button>
</div>
);
}
}
const mapStateToProps = state => {
return { usuario: state.usuarioFormReducer };
};
const mapDispatchToProps = dispatch => {
return {
busca: (id) => {
dispatch(UsuarioService.busca(id));
}
}
}
const UsuarioFormContainer = connect(mapStateToProps, mapDispatchToProps)(UsuarioForm);
export default UsuarioFormContainer;
这个怎么做?我需要使用减速机来改变吗?我需要使用反应状态吗?
解决方案
您需要创建一个 setName 函数并在每次按键时将其添加到输入中
动作.js
export const setName = (value) => ({
type: 'SET_NAME',
payload: value
})
减速器.js
const initialState = {
Nome: '',
Login: '',
}
export function usuarioFormReducer(state = initialState, action) {
switch (action.type) {
case SET_NAME:
return {
...state,
Nome: action.payload,
};
}
}
推荐阅读
- python - 计算 RR 阵列的 LF/HF 频带
- python - 无法通过回调清除多行图
- c# - 用工厂模式中的方法替换连接字符串
- scala - 未指定类型参数时的Scala隐式排序错误
- parquet - parquet:具有不同列的数据集文件
- docker - 停止从 docker 容器启动的 nginx 服务
- ruby-on-rails - 我可以关闭从 http 到 https 的重定向,但仍然使用 forse_ssl(config.forse_ssl = true) 生成带有 https 协议的 URL/资产?
- excel - 如何在数据输入后锁定行的一部分
- java - 创建没有自动装配的通用函数
- swift - 我无法在我的 ios 应用程序中将用户添加到 Cloud Firestore