时间戳

首页 > 解决方案 > 学习者问题：如何将数据从一个类传递到另一个类

reactjs - 学习者问题：如何将数据从一个类传递到另一个类

问题描述

我正在学习 spfx 开发。我正在创建一个包含几个不同类的表单，以了解它们如何相互交互和传递数据。

我有两个单独的课程。一个父类有一个提交按钮，它使用父状态提交到 SharePoint 列表。另一个类组件有它自己的一组状态和字段。我希望用户在子组件中输入的任何内容都可以被父类提交（！）。

这是我的提交功能：

private _onSubmit() {
    this.setState({
      FormStatus: 'Submitted',
      SubmittedLblVis: true,

  }, () => {

      pnp.sp.web.lists.getByTitle("JobEvaluationItems").items.add({

        JobTitle: this.state.JobTitle,
        Faculty: this.state.Faculty,
        Department: this.state.SelectedDept,
        SubDepartment: this.state.SubDepartment,
        DeptContactId: this.state.DeptContact,
        FormStatus: this.state.FormStatus,
        EvalType: this.state.EvalType,
        JobTitReportTo: this.state.JobTitReportTo

      }).then((iar: ItemAddResult) => {

        let list = pnp.sp.web.lists.getByTitle("JobEvaluationItems");
        list.items.getById(iar.data.Id).update({
            JobRef: 'JE'+iar.data.Id
        });
        this.setState({
          JobRef: iar.data.Id
        });
      });   
    });   
  }

这是子组件中的一个函数，它处理输入到字段中的任何内容：

private _onJobTitReportToChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
        this.setState({
          JobTitReportTo: newValue
        });
      }

我如何将上面的状态函数（保存在子组件中）传递给父组件？

标签： reactjstypescriptsharepoint-onlinespfx

解决方案

class Child extends React.Component {
  state = {
    childValue: 1
  }
  
  onChange = e => {
    this.setState({childValue: e.target.value}, () => {
      this.props.onChange(this.state);
    })
  }
  
  render () {
    return <input value={this.state.childValue} onChange={this.onChange} />
  }
}

class Parent extends React.Component {
  state = {
    parentValue: 123,
    dataFromChild: null
  }
  
  handleChildChange = childData => {
    this.setState({dataFromChild: childData});
  }
  
  render () {
    return (
      <div>
        <Child onChange={this.handleChildChange} />
        
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

在 React 世界中，有两种常用的数据传输方式：

  • 如果您想将其传递给子组件 - 使用道具；
  • 如果你想将它传递给父组件 - 使用回调；

还有另一种方式 - 上下文，但这是一个完全不同的故事。

推荐阅读