Изменить входное значение с помощью React Rudux - PullRequest
Новая
       7

Изменить входное значение с помощью React Rudux

0 голосов
/ 01 декабря 2018

Я использую реактивный редуктор, чтобы создать CRUD для изучения реакции.
Но я не могу изменить входное значение с помощью реактивного редукса.

Вот мой 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;

Как это сделать?Мне нужно использовать редуктор, чтобы изменить?Мне нужно использовать состояние реагирования?

1 Ответ

0 голосов
/ 01 декабря 2018

Вам необходимо создать функцию 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,
        };
 }
}
...