Поле ввода текста теряет фокус после ввода символа
Пытаюсь сделать простое приложение, которое будет отображать на странице введенный текст. Во-первых, введенный текст не отображается. Во-вторых, поле ввода теряет фокус после каждого введенного символа. При использовании локального стейта (useState) такой проблемы не было. С чем могут быть связаны проблемы?
Код reducer'а:
const UPDATE_INPUT_TEXT = 'UPDATE-INPUT-TEXT'
const initialState = {
text: ''
}
export const inputReducer = (state = initialState, action) => {
const newState = JSON.parse(JSON.stringify(state))
switch (action.type) {
case UPDATE_INPUT_TEXT:
newState.text += action.newText;
return newState
default:
return state
}
}
export const updateInputTextActionCreator = (newText) => ({type: UPDATE_INPUT_TEXT, newText})
код хранилища:
import {inputReducer} from "./inputReducer";
const reducers = {
inputReducer
}
const initialState = {
text: ''
}
const store = configureStore({
reducer: reducers,
preloadedState: initialState
}
)
export default store;
index.js:
import reportWebVitals from './reportWebVitals';
import store from "./redux/store";
const renderTree = (state) => {
console.log(state)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App state={state}
dispatch={store.dispatch.bind(store)}/>
</React.StrictMode>
);
}
renderTree(store.getState())
store.subscribe(() => {
renderTree(store.getState())
})
App:
const App = (props) => {
return (
<div className="App">
<div>{props.state.text}</div>
<InputField newText={props.state} dispatch={props.dispatch}/>
</div>
);
}
Компонента с полем ввода:
const InputField = (props) => {
const onTextChange = () => {
props.dispatch(updateInputTextActionCreator(ref.current.value))
}
const ref = useRef(null);
return (
<input ref={ref} className='input' type="text" onChange={onTextChange}/>
);
};