Как повторно визуализировать дочерний компонент в реагировать spfx? - PullRequest
Новая
       10

Как повторно визуализировать дочерний компонент в реагировать spfx?

0 голосов
/ 24 апреля 2019

У меня есть дочерний компонент, который состоит из формы с тегами ввода.Я рендеринг этого компонента в родительском.Я хочу повторно отобразить дочерний компонент с новыми значениями при изменении раскрывающегося значения. 

export interface INewFormProperties {
data:any[];
allNames:any[];
allData :any[];
selectedId:any;

 }
export default class NewForm extends React.Component<any, INewFormProperties> {
    constructor(props: any) {
      super(props);
      console.log(this.props.data);
      console.log(this.props.allNames);
      console.log(this.props.selectedId);

  }
 render() {
      return <div className="row">
       <div className="form-group col-md-4">
    <label>Name:<i><b>*</b></i></label>

<select className="form-control formControl" onChange= { () =>
                    this.props.simplifiedFunction()} id="ddlName" defaultValue={this.props.data[0].EmployeeID} >
{this.props.allNames}
</select>
</div> <div className="form-group col-md-4">
<label>Title:</label>
  <input className="form-control formControl" value={this.props.data[0].Title}  id="txtTitle"
   />
</div>
    <div className="form-group col-md-4">
    <label>Department:</label>
    <input className="form-control formControl" value={this.props.data[0].Department} id="txtDepartment" />
</div></div>
}

 }

В родительском компоненте: private renderUpdateItems (): JSX.Element {

  var selectedId = this.state["selectedEOYID"];
    var data= {};
     if(this.state["isUPdate"]){
        alert("New Update...");
     }
    data = this.state["Items"].filter(item => item.ID == 25);
    return <div>
     <NewForm data={data} allNames={this.state["allNames"]} 
  simplifiedFunction = {this.updateFormDataNew} allData={this.state["Items"]} selectedId={this.state["selectedEOYID"]}></NewForm>

} 

private updateFormDataNew(){
   var data = {};
   var selectedId = document.getElementById('ddlName')["value"];
   parentRef.setState({selectedEOYID:selectedId});
}

Я изменяю состояние родительского компонента, который я передал в качестве свойства в дочерний компонент, но при изменении состояния дочерний компонент должен повторно выполнить рендеринг?

1 Ответ

1 голос
/ 24 апреля 2019

Да, дочерний компонент должен перерисовываться, если вы меняете его реквизиты Пожалуйста, проверьте, что состояние изменено, и функция отображения вызывается в вашем родительском компоненте, когда вы устанавливаете новое состояние. Я думаю, что у вас есть проблема с parentRef. Вот как это исправить:

  1. Не злоупотребляйте ссылками. ( нажмите здесь, чтобы прочитать React doc о ссылках )

Попробуйте изменить 

parentRef.setState({selectedEOYID:selectedId});

до 

this.setState({selectedEOYID:selectedId});
  1. Кроме того, вы можете получить значение по вашему выбору, не используя API документа: ( нажмите здесь, чтобы узнать больше о формах в React и о том, как работать с выбором )

Вы можете изменить 

onChange= { () => this.props.simplifiedFunction()}

до 

onChange={this.props.simplifiedFunction}

и переписать вашу функцию updateFormDataNew следующим образом 

private updateFormDataNew(event){
   var selectedId = event.target.value;
   this.setState({selectedEOYID:selectedId});
}

Пожалуйста, попробуйте сделать это. Если это не поможет, предоставьте конструктор и функции рендеринга родительского компонента.

...