我是React-Redux的新手,我正在尝试使用Material-ui TextField
构建类似绑定的表单,并在发生任何更改时在div中显示其内容。有我的代码:
TextField组件:
handleHead = event => {
store.dispatch(newTitle(event.target.value));
}
render() {
return (
<div>
<div style={MDStyle}>
<TextField style={dblock}
floatingLabelText='Title'
onChange={this.handleHead}
fullWidth={true}/>
</div>);
}
减速
import { combineReducers } from 'redux';
function markdown(state = [], action) {
switch (action.type) {
case 'NEW_TITLE':
return Object.assign({}, state, {
title: action.text
});
default:
return state;
}
}
export default combineReducers({ markdown });
商品
import { createStore } from 'redux';
import reducers from '../reducers/Reducers';
const initialState = {
markdown: {
title: ''
}
};
const store = createStore(reducers, initialState);
export default store;
当我尝试在输入中键入内容时,问题就出现了,它失去了焦点,我无法继续输入任何内容。似乎组件重新渲染。解决这个问题的最简单方法是什么?考虑到在react-form
甚至refs
之前已经解决了这些问题,您能否给我一些指导方针或最佳实践来解决这个问题?