Question

我很反应和redux.I我正试图将数据从一个组件传递到另一个组件。但它没有父子关系，而且彼此独立。任何人都可以帮我这样做吗？下面是我的代码。

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;

Answer 1

好的，这是一个例子。我将假设您已经配置了所有Redux商店，即商店创建，rootReducer等......因为这是一个单独的帖子。

因此，基本的想法是，当您想要更新Redux商店状态时，将行动行动发送到减少器并发送有效负载数据与它一起。这听起来很混乱，但基本上只是告诉减速机你想做什么，即＃34;嘿减速机我想要你UPDATE_EMP_NUMBER，这里是数据＆＃34;。

如下所示，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);

我真的希望这会有所帮助，当你无法看到最终会发生这种情况时，很难解释这一点！

在独立组件react和redux之间传递数据

1 个答案: