[英]React.js Form input onChange having issue with getDerivedStateFromProps
输入onChange
在使用getDerivedStateFromProps
时不更新状态。 在我将道具从父级传递给子级之后,我正在检查来自子组件的getDerivedStateFromProps
。 完整演示 - https://codesandbox.io/s/011m5jwyjw
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
form: {}
};
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.user) {
return { form: nextProps.user };
}
return {
...prevState
};
}
inputHandle(e) {
this.setState(prevState => ({
...prevState,
form: {
firstname: e.target.value
}
}));
}
render() {
return (
<input
type="text"
name="firstname"
value={this.state.form.firstname}
onChange={e => this.inputHandle(e)}
/>
);
}
}
从React 16.4开始, getDerivedStateFromProps
并在每次更新时获取组件道具,无论它是什么原因(更改道具或状态)。 因此,每次调用this.setState
时,此代码都会重置表单值:
if (nextProps.user) { // nextProps are here on every state change
return { form: nextProps.user };
}
要修复它,请将当前用户保存到状态,并仅在用户更改时重置form
状态属性。
this.state = {
form: {},
lastUser: null,
};
// ...
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.user !== prevState.lastUser) {
return {
form: nextProps.user,
lastUser: nextProps.user
};
}
return {};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.