如何在反应 spfx 中重新渲染子组件？

Question

我有一个子组件，它由一个带有输入标签的表单组成。我在父级中渲染这个组件。我想在更改下拉值时使用新值重新渲染子组件。

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

 }

在父组件中： 私有 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});
}

我正在更改作为属性传递给子组件的父组件的状态，但是在更改状态时子组件应该重新渲染？

Answer 1

是的，如果您更改其道具，子组件应该重新呈现。当您设置新状态时，请检查您的父组件中的状态是否已更改并调用了渲染函数。我认为您对parentRef 有疑问。以下是解决方法：

1. 不要过度使用 Refs。 (click here to read React doc about refs )

尝试改变

parentRef.setState({selectedEOYID:selectedId});

到

this.setState({selectedEOYID:selectedId});

1. 另外，您可以在不使用文档 API 的情况下获取您选择的值：(click here to read more about forms in React and how to work with select)

你可以改变

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

到

onChange={this.props.simplifiedFunction}

然后像这样重写你的 updateFormDataNew 函数

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

请尝试这样做。如果这没有帮助，请提供父组件的构造函数和渲染函数。