Невозможно передать данные из ввода в div с помощью REDUX - PullRequest
0 голосов
/ 27 октября 2019

Я создал следующий код, который берет значение из ввода и должен отображать его в элементе div.

import React, {Component} from 'react';
import './App.css';
import {createStore} from "redux";
import {connect, Provider} from "react-redux";
import ReactDOM from "react-dom";

const initalstate = {
    firstName: 'F',
    lastName: 'L'
};

const F_NAME = "F_NAME";
const L_NAME = "L_NAME";

const changeFirstName = (newFirstName) => {
    console.log(newFirstName);
    return {
        type: F_NAME,
        payload: newFirstName
    }
};
const changeLastName = (newLastName) => {
    console.log(newLastName);

    return {
        type: L_NAME,
        payload: newLastName
    }
};
const rootreducer = (state = initalstate, action) => {
    switch (action.type) {
        case F_NAME:
            return {
                ...state, firstName: action.payload
            };
        case L_NAME:
            return {
                ...state, lastName: action.payload
            };
    }
    return state
};
const store = createStore(rootreducer);

function App(props) {
    const dispatch = props.dispatch;
    // console.log(props);

    return (
        <div className="test">
            <div className='test'>
                <input type="text" onChange={(e) => {
                    dispatch(changeFirstName(e.target.value))
                }} value={props.changeFirstName} placeholder="first name"/>
                <input type="text" onChange={(e) => {
                    dispatch(changeLastName(e.target.value))
                }} value={props.changeLastName} placeholder="last name"/>
            </div>
            <div>{props.changeFirstName}</div>
        </div>
    );
}

const mapStateToProps = (state) => {
    return {
        firstName: state.firstName,
        lastName: state.lastName
    }
};

const Wrapp = connect(mapStateToProps)(App);

ReactDOM.render(
    <Provider store={store}>
        <Wrapp/>
    </Provider>, document.getElementById('root')
);

Я вижу функцию onChange, используя журнал консоли. Я имею в виду, я могу видеть текст из своих входных данных, если я использую console.log(), но когда я попытался отобразить входное значение в <div>{props.changeFirstName}</div>, я ничего не увидел. В чем может быть проблема?

1 Ответ

1 голос
/ 27 октября 2019

Это потому, что вы передаете неправильные значения на эти входы. Это должно быть

<input type="text" onChange={(e) => {
      dispatch(changeFirstName(e.target.value))
      }} value={props.firstName} placeholder="first name"/>
<input type="text" onChange={(e) => {
      dispatch(changeLastName(e.target.value))
      }} value={props.lastName} placeholder="last name"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...