Question

我正在使用react redux创建一个CRUD来学习react。
但是我无法通过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;

如何制作？我需要使用减速器进行更换吗？我需要使用反应状态吗？

Answer 1

您需要创建一个setName函数并将其添加到每次按键输入中

action.js

export const setName = (value) => ({
  type: 'SET_NAME',
  payload: value
})

reducer.js

const initialState = {
  Nome: '',
  Login: '',
}
export function usuarioFormReducer(state = initialState, action) {
    switch (action.type) {
    case SET_NAME:
        return {
            ...state,
            Nome: action.payload,
        };
 }
}

使用React Rudux更改输入值

1 个答案: