Вопрос учащегося: как передавать данные из одного класса в другой

Я изучаю spfx dev. Я создаю форму с несколькими разными классами, чтобы узнать, как они могут взаимодействовать и передавать данные друг другу.

У меня два отдельных класса. Один родительский класс имеет кнопку отправки, которая использует состояние родителей для отправки в список 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
        });
      }

Как передать вышеприведенную функцию состояния (которая содержится в дочернем компоненте) в родительский компонент?


reactjs typescript sharepoint-online spfx
person NightTom    schedule 16.09.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward 

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 есть два распространенных способа передачи данных:

  • Если вы хотите передать его дочернему компоненту - используйте props;
  • Если вы хотите передать его родительскому компоненту - используйте обратный вызов;

Есть другой способ - Контекст, но это совсем другая история.

person Ivan Burnaev    schedule 16.09.2019
comment
Привет - при попытке вашего примера (ов) я не могу передать функцию дочернему компоненту. В нем говорится: введите '{getGrades: () = ›void; контекст: WebPartContext; описание: строка; } 'не может быть назначен типу' IntrinsicAttributes & IntrinsicClassAttributes ‹EvalReqNewForm› & Readonly ‹{children ?: ReactNode; } ›& Только чтение ‹IEvalReqNewProps›». Свойство getGrades не существует для типа IntrinsicAttributes & IntrinsicClassAttributes ‹EvalReqNewForm› & Readonly ‹{children ?: ReactNode; } ›& Только чтение ‹IEvalReqNewProps›». - person NightTom; 16.09.2019
comment
EvalReqNewForm - это дочерний компонент, кстати - person NightTom; 16.09.2019
comment
Вот как родительский рендер вызывает дочерний компонент и «пытается» передать функцию дочернему: ‹EvalReqNewForm getGrades = {this._getGrades} context = {this.props.context} description = {this.props.description} / › - person NightTom; 16.09.2019
comment
Я не большой поклонник Typescript, но считаю, что вам следует добавить эту опору к определению ваших типов опор компонента Child. - person Ivan Burnaev; 16.09.2019
comment
Я полагаю, getGrades следует добавить в IEvalReqNewProps интерфейс. - person Ivan Burnaev; 16.09.2019

arrow_upward
1
arrow_downward

если вы хотите передать данные от одного компонента к другому, выполните следующие действия.

1. РОДИТЕЛЬ -> РЕБЕНОК

В рендере родительского компонента

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

2. РЕБЕНОК -> РОДИТЕЛЬ

сделайте обработчик в своей функции отправки, который будет получен этому дочернему компоненту от реквизита

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

arrow_upward
1
arrow_downward

Как передать вышеприведенную функцию состояния (которая содержится в дочернем компоненте) в родительский компонент?

Это одна из концепций React, которая называется подъем состояния.

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
}
person Joseph D.    schedule 16.09.2019