我对React和Redux非常陌生,我正在尝试将数据从一个组件传递到另一个组件。但它没有父子关系,并且彼此独立。谁能帮我做到这一点?下面是我的代码。
export class EmpSearch extends React.Component {
constructor(props) {
super(props);
this.state = {
Empnumber: ''
};
}
updateEmpNumber(e) {
this.setState({Empnumber: e.target.value});
}
render() {
return (
<div className="row">
<form>
<div className="form-group">
<label htmlFor="Empnumber">Emp Number</label>
<input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
</div>
</form>
</div>
);
}
}
function mapStateToProps(state){
return{
Empnumber: state.Empnumber
};
}
export default connect(mapStateToProps)(EmpSearch);
另一个文件是我想发送EmpNumber的位置,
class EmpDetail extends React.Component {
render() {
return (
<div className="container">
<input type="text"/>
</div>
);
}
}
export default EmpDetail;
好的,这是一个例子。我将假设您已经配置了所有Redux存储,即创建存储,rootReducer等…,因为这是一个单独的帖子。
因此,基本的想法是,当你想更新你的终极版商店状态你 派遣 一个 动作 到 减速机
,并与它一起发送数据的有效载荷。这听起来令人困惑,但从本质上讲,它只是告诉减速器您想要做什么,即“嘿减速器,我想让您进行UPDATE_EMP_NUMBER,这是数据”。
基本上,reducer只是下面的大量switch语句,它只是根据给定的操作返回新的状态部分。
同样,我对您的体系结构,商店等一无所知,因此这都是基于假设的,但是这对您来说可能是什么样子。
减速器
export default function employeeReducer(state = [], action) {
switch (action.type) {
case UPDATE_EMP_NUMBER:
{
const Empnumber = action.payload;
return {
...state,
Empnumber
};
}
case ANOTHER_ACTION:
{
// etc...
}
default:
return state;
}
}
考虑到以上几点,您可以像这样更新代码。
EmpSearch
export class EmpSearch extends React.Component {
// Not needed anymore as state going to Redux and not local component state
/*
constructor(props) {
super(props);
this.state = {
Empnumber: ''
};
}
*/
updateEmpNumber(e) {
// No need to set state here as you are now passing this data to Redux store
// this.setState({Empnumber: e.target.value});
// Instead we will dispatch an action and send the empNumber to the reducer
this.props.dispatch({
type: 'UPDATE_EMP_NUMBER',
payload: e.target.value
});
}
render() {
return (
<div className="row">
<form>
<div className="form-group">
<label htmlFor="Empnumber">Emp Number</label>
<input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.props.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
</div>
</form>
</div>
);
}
}
function mapStateToProps(state){
return {
Empnumber: state.Empnumber
}
}
export default connect(mapStateToProps)(EmpSearch);
然后,您的EmpDetail类仅需要连接到商店(或将数据作为道具传递,但更容易将其连接)。
EmpDetail
class EmpDetail extends React.Component {
render() {
const empNumber = this.props.Empnumber;
return (
<div className="container">
Empnumber = {empNumber}
</div>
);
}
}
function mapStateToProps(state){
return {
Empnumber: state.Empnumber
}
}
export default connect(mapStateToProps)(EmpDetail);
我真的希望这会有所帮助,当您看不到最终结果时,很难解释这一点!