Javascript 在回调函数中设置属性值

我是个新手，不知道我在这里是否采取了正确的方法

我有一个名为

的配置文件页面和一个名为

的低级组件。我想在

上存储

的状态，所以我只需要在一个地方为所有组件编写AJAX逻辑。这种想法正确吗

更具体地说，我感兴趣的是，当用户更改输入时，我将

event.target.value

传递给

的方式是否正确

联系方式：

从“React”导入React；
类ContactDetails扩展了React.Component{
render（）{
返回(
this.props.onContactDetailsChange（Object.assign（this.props.contactDetails，{email:event.target.value}））}/>
this.props.onContactDetailsChange（Object.assign（this.props.contactDetails，{firstName:event.target.value}））}/>
)
}
}
导出默认联系人详细信息；

应用程序：

从“React”导入React；
从“react dom”导入react dom；
从“/components/contact_details”导入ContactDetails；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
联系方式：{
电邮:'a@a.com',
名字：“”
}
}
}
render（）{
返回(
this.setState（{contactDetails}）}
contactDetails={this.state.contactDetails}
/>
);
}
}
ReactDOM.render（，document.querySelector（'.container'）；

以下是我编写您的解决方案的方式：

从“React”导入React；
//基于类的组件处理逻辑
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
联系方式：{
电邮:'a@a.com',
名字：''，
姓氏：“”，
手机：“”
}
}
}
//一个处理输入更改的函数
handleContactDetailsChange=（值）=>{
//assign（）第一个参数是目标对象。
//assign（）将目标对象返回到contactDetails中。
//第二个参数是旧的contactDetails。
//第三个参数是新的输入值。
//因为第三个参数来得晚，所以它覆盖了
//具有相同密钥的contactDetails。
这是我的国家({
contactDetails:Object.assign（{}，this.state.contactDetails，{…value}）
});
//{…value}也可以仅作为值写入，但这会创建一个副本。
}
render（）{
返回(
);
}
}
//无状态功能组件。
//将道具作为参数。
const ContactDetails=（道具）=>{
//从props对象中提取我们需要的两个props（更简洁的语法）。
const{onContactDetailsChange，contactDetails}=props；
返回(
onContactDetailsChange（{email:event.target.value}）
/>
onContactDetailsChange（{firstName:event.target.value}）}
/>
)
};
导出默认应用程序；

---

ContactDetails通常会在它自己的文件中。您还通过调用

Object.assign（this.props.contactDetails，{firstName:event.target.value}）

修改了props，因为目标是

this.props.contactDetails

这段代码是否没有给你关于不直接更改道具的警告？Google Chrome控制台中没有警告，不知道如何运行此功能。您的contact details组件返回2个元素，它们没有封装在一个封闭的标记中，我得到了这个错误<代码>解析错误：相邻的JSX元素必须包装在一个封闭的标记中。您的总体逻辑大致正确，将值传递回App并将其存储在状态。但这段代码不应该运行。啊，对不起，我现在要更新它，我简化了代码以使其更易于阅读，并且忘记了放入包装器div。您忘记了将

handleContactDetailsChange

绑定到

This

。别忘了，ES6 arrow函数内置了这种行为。否则调用此.setState（）甚至在我的代码中都不起作用。我的眼睛滑过了带有箭头函数的类属性：）出于性能原因，react建议在构造函数方法

this.handleContectDetailsAnge=this.handleContectDetailsAnge.bind（this）处绑定'this'this'binding文档参考：使用示例中使用的胖箭头语法是否具有相同的性能优势？我认为它们的意思是，如果在渲染方法中绑定它们，它们将在每次渲染时再次绑定，并且在构造函数中仅绑定一次。由于arrow函数属于该类并且不在render中，所以我认为不会有任何性能差异。