Question

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

我有两个单独的班级。一个Parent类具有一个Submit按钮，该按钮使用Parents状态来提交到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
        });
      }

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

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

如果要将数据从一个组件传递到另一个组件，请按照以下步骤操作。

1.PARENT->儿童

在父组件的渲染中

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

2.CHILD->父母

在您的Submit函数中创建一个处理程序，该处理程序将从props接收到此子组件

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

Answer 3

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

这是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
}

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

3 个答案: