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

Question

我正在学习 spfx 开发。我正在创建一个包含多个不同 class 的表单，以了解它们如何交互以及如何在彼此之间传递数据。

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

这是我的提交功能：

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
        });
      }

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

Answer 1

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 世界中有两种常用的数据传输方式：

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

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

Answer 2

如果您想将数据从一个组件传递到 other.Follow，请执行以下步骤。

1.PARENT --> CHILD

在 parent 组件的渲染中

render(){
 return (
  <ChildComponent data1={} data2={}/>
 )
}

2.CHILD-->PARENT

在您的提交函数中创建一个处理程序，该处理程序从 props

接收到此 child 组件

//CHILD COMPONENT
onSubmit=()=>{
   ...
   //some data
   ...
   this.props.onSubmit(data)
 }
//Parent component
render(){
 return(
   ....
   <ChildComponent onSubmit={this.onSubmit}/>
   ....
 )
}

Answer 3

How would I pass the state function above (which is held within the child component) to the Parent component?

这是 React 的概念之一，叫做 lifting state up。

class Parent extends React.Component {
  const someFunction = () => {} // move the function to the parent

  render() {
    return (
      <>
        <ChildComponent someFunction={someFunction} /> // pass function down to child
      </>
    )
  }
}

const ChildComponent = (props) => {
  return <Button onClick={props.someFunction} /> // use parent function
}

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

Learner question: How to pass data from one class to another

typescript

reactjs

sharepoint-online

spfx