[英]Textfield does not react to Reducer, although console.log show correct value
我想写一个迭代学校班级学生的工具。 所以我在react组件中有一个文本字段显示一个值:
<input className="form-control" onChange={this.handleInputChange} value={this.props.activePupil.name}></input>
如果我将其值绑定到瞳孔名称(由我的Redux商店作为道具提供给我的组件),则只要商店中的值发生更改,它就始终向我显示正确的值。
但是,我还希望用户能够在不正确的情况下更改学生的姓名。 如果输入字段的值绑定到props,则此方法不起作用。
所以我想将其绑定到某些本地状态,并在构造函数中执行以下操作:
this.state = {
inputField: "No Pupil selected yet."
};
...并且每当用户编辑文本字段时,都将在handleInputChange方法中对其进行处理,如下所示:
this.setState({
inputField: evt.target.value
});
这一切都很好,但是现在当我要遍历学校课程时,包含当前或当前学生的减速器是正确的(console.log显示正确的值),但是输入字段中显示的值始终为1背后。
为什么会这样呢?
编辑:完整代码:
// Import React
import React from 'react';
class PupilViewer extends React.Component{
constructor(props) {
super(props);
this.state = {
inputField: "No Pupil selected yet."
};
this.handleInputChange = this.handleInputChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
handleInputChange(evt) {
this.setState({
inputField: evt.target.value
});
}
onSubmit(e) {
e.preventDefault();
this.props.nextPupil();
this.state.inputField = this.props.activePupil.name;
}
render() {
// Return JSX via render()
return (
<div className="">
<h1>Pupil View</h1>
<input className="form-control" onChange={this.handleInputChange} value={this.state.inputField}></input>
<button className="btn btn-large btn-positive" onClick={this.onSubmit}>Next</button>
</div>
);
}
}
// Export Search
export default PupilViewer
上面的组件从容器提供以下参数:
<PupilViewer nextPupil={this.props.nextPupil} pupilList={this.props.pupils} activePupil={this.props.activePupil} saveChanges={this.props.saveChanges} updateActivePupil={this.props.updateActivePupil}/>
我需要在这里指出,nextPupil,saveChanges和updateActivePupil是我在此处传递的函数 。 我有两个减速器。 一个包含所有学生的对象,另一个包含活动学生的对象:
主动式减瞳器:
export default function (state={id: -1, name:"Default Pupil Name in State"}, action) {
switch (action.type) {
case "UPDATE_ACTIVE":
let newState = action.payload;
return newState;
case "GET_ACTIVE":
return state;
default:
return state;
}
}
我所有学生的减速器:
//my default array
let default_pupils = [{
id: 0,
name: "Matthew",
//there are more attributes here
},
{
//and there are more pupils here
}];
export default function (state=default_pupils, action) {
switch (action.type) {
case "SAVE_CHANGES":
let newState = [...state];
newState[2] = {...newState[2], name: action.payload.name };
return newState;
default:
return state;
}
}
最后,这是我的操作:
var activePupilCount = 0;
export const getActivePupil = () => {
return {
type: "GET_ACTIVE"
};
}
export const updateActivePupil = (pupil) => {
console.log("UPDATE:" + pupil.name)
return {
type: "UPDATE_ACTIVE",
payload: pupil
};
}
export const nextActivePupil = () => {
return (dispatch, getState) => {
const {activePupil, pupilList} = getState();
activePupilCount++;
console.log("COUNT:"+ activePupilCount);
const nextIndex = (activePupilCount) % pupilList.length;
const nextActive = pupilList[nextIndex];
dispatch({ type: "UPDATE_ACTIVE", payload: nextActive });
}
};
export const saveChanges = (pupil) => {
return {
type: "SAVE_CHANGES",
payload: pupil
}
};
不知道这是否可以解决所有问题并使其按预期工作,但是您绝对不应该这样做
this.state.inputField = this.props.activePupil.name;
相反,做
this.setState({ inputField: this.props.activePupil.name })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.