如何使用React js传递来自不同组件的值
如何使用React js传递来自不同组件的值
提问于 2021-01-12 14:28:29
我有三个像Main.js这样的组件，是父组件，Main.js有两个不同的类组件，比如Employee.js和EmployeeAddress.js。
从Main.js调用的两个组件。我可以从Main.js和EmployeeAddress.js访问父Employee.js属性值。
我想从Employee.js属性值获得详细信息到EmployeeAddress.js
为了前夫。我想将EmployeeName值显示到EmployeeAddress.js中。如果从EmployeeName中修改了Employee.js文本框值
export default class Main extends React.Component {
constructor(props){
super(props)
}
render(){
return(
<Employee />
<EmployeeAddress />
);
}我想将值从Employee.js传递给EmployeeAddress.js 注意:这两个组件是不同的，没有父关系和子关系。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-12 14:35:07
//Main.js：
export default class Main extends React.Component {
constructor(props){
super(props)
this.state={
employee : {
employeeName: '',
//otherData
}
}
}
function handleEmployeeData(data) {
this.setState({
employee: data
})
}
render(){
return(
<Employee handleEmployeeData={this.handleEmployeeData} employee={this.state.employee}/>
<EmployeeAddress handleEmployeeData={this.handleEmployeeData} employee={this.state.employee}/>
);
}//Employee.js或EmployeeAddress.js
在这里，当onChange或onClick发生时，设置新的雇员数据，这将以父级状态设置雇员数据，两个子级都可以使用这些数据。
在这些文件的呈现方法中，您可以执行以下操作：
<NameInput* onBlur={e => this.props.handleEmployeeData({...this.props.employee, name: e.target.value})} />您可以对employeeData中的任何字段执行这样的操作
- 注意到
NameInput是一个占位符，您可以用任何您想要的
组件替换它。
Stack Overflow用户
发布于 2021-01-12 14:34:01
您需要处理Main.js中的数据并将其传递给这两个组件。当发生更改时，您将在父组件中执行该操作，并将其再次传递下去。
export default class Main extends React.Component {
this.state = {
employeData: {...}
}
constructor(props){
super(props)
}
onChangeName = () =>{
//changing the name
this.setState({
employeData
})
}
render(){
return(
<Employee {...employeData} onChangeName={this.onChangeName}/>
<EmployeeAddress {...employeData} onChangeAdress={this.onChangeAdress}/>
);
}其他选项可以是全局状态管理，如contextAPI oder。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65685913
复制相关文章
相似问题
腾讯云开发者
