Reactjs 比较第一个状态和最后一个状态
我正在尝试制作一个编辑页面。我正在为所做的任何更改更新状态。我想将初始状态与上次保存时的最后状态进行比较。但我无法控制第一状态Reactjs 比较第一个状态和最后一个状态,reactjs,state,react-props,Reactjs,State,React Props,我正在尝试制作一个编辑页面。我正在为所做的任何更改更新状态。我想将初始状态与上次保存时的最后状态进行比较。但我无法控制第一状态 export default class extends Component { constructor(props){ super(props); this.changeDetails = this.changeDetails.bind(this); this.state = { dri
export default class extends Component {
constructor(props){
super(props);
this.changeDetails = this.changeDetails.bind(this);
this.state = {
driver: this.props.driver
}
}
changeDetails = value => {
this.setState({
driver:value
})
}
onRegister = () => {
//I want to make a comparison here.
}
render() {
const {driver} = this.state
return (
<div>
<EditView driver={driver} changeDetails={this.changeDetails}/>
</div>
);
}
}
导出默认类扩展组件{
建造师(道具){
超级(道具);
this.changeDetails=this.changeDetails.bind(this);
此.state={
司机:这个。道具。司机
}
}
changeDetails=值=>{
这是我的国家({
驱动因素:价值
})
}
onRegister=()=>{
//我想在这里做一个比较。
}
render(){
const{driver}=this.state
返回(
);
}
}
EditView.js
export default class extends Component {
render() {
const { driver} = this.props;
const changeDetails = event => {
driver['fname] = event.target.value;
this.props.changeDetails(driver);
};
return (
<div>
<Input
value={driver.fname}
onChange={event => changeDetails(event)}
/>
</div>
);
}
}
导出默认类扩展组件{
render(){
const{driver}=this.props;
const changeDetails=事件=>{
驱动程序['fname]=event.target.value;
此.props.changeDetails(驱动程序);
};
返回(
更改详细信息(事件)}
/>
);
}
}
不要直接改变驱动程序本身。使用类似以下内容:
const changeDetails = event =>
this.props.changeDetails( { ...driver, fname: event.target.value } );
如果要比较,为什么不保存两个单独的状态值?或者更好的是,如果你的“驱动程序”数据在这里不会更改,为什么不保持一个状态并将其与你的“驱动程序”道具进行比较?(oldDriver=this.props.driver和newDriver=this.props.driver)我这样做,但当我更新新驱动程序时,旧驱动程序也会更改为什么你要将newDriver设置为你的道具值?你在别的地方找到了驾驶道具,对吗?因此,只需通过onChange为新信息保留一个状态,然后将其与您的道具(原始驱动程序数据)进行比较。我应该在父组件中进行比较吗?我传递了驱动程序数据,让我更好地理解您的逻辑。这里(第一个组件)获得一个名为driver的道具。您正在呈现EditView组件,并通过onChange处理程序从中获取一个值。您不能在状态中设置此值,并将其与第一个组件中的原始驾驶员道具进行比较吗?