Я создал следующий код, который берет значение из ввода и должен отображать его в элементе 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>
, я ничего не увидел. В чем может быть проблема?