当元素的值发生变化时，Syncfusion 选项卡控件的值不会刷新

Question

我有一个带有几页的同步融合选项卡控件，它显示在状态变量中设置的值，每当我通过 setstate 更改值时，我希望选项卡中的值得到更新，但不幸的是它不会发生。

我什至设置了 enablePersistence="true" 但没有效果。

如果我将输入字段放在表单中，通过单击测试按钮，它将被新值刷新，而不是选项卡控件中的值。

您的建议将不胜感激。

代码如下：

// --------------------------------------------------------------------------------------
export default class FormDataBinding extends Component {
  constructor() {
    super(...arguments);
    this.state = { name: "name", family: "family" };

    this.headertext = [
      { text: "Twitter", iconCss: "e-twitter" },
    ];
  }
  // --------------------------------------------------------------------------------------
  tabContent1 = () => {
    return (
      <React.Fragment>

        <p>thes controls are inside Tab Component</p>
        <div>
          {/* it's not working because it's inside  tabComponent */}
          <input
            type="text"
            value={this.state.name}
            key="nameKey1"
            id="nameId1"
            style={{ width: "500px" }}
          ></input>
          <br />
          <input
            type="text"
            value={this.state.family}
            key="familyID1"
            id="familyKey1"
            style={{ width: "500px" }}
          ></input>
          <button onClick={this.btnClick.bind(this)}>click hear</button>
        </div>
      </React.Fragment>
    );
  };
  // --------------------------------------------------------------------------------------
  btnClick = () => {
    var newName = "name :" + new Date().toTimeString();
    var familyName = "family : " + new Date().toTimeString();

    this.setState({ name: newName });
    this.setState({ family: familyName });
    this.UpdateStateInstantly(newName);
    this.ShowTabs();
  };
  // --------------------------------------------------------------------------------------
  ShowTabs = () => {
    return (
      <TabComponent
        enablePersistence="true"
        heightAdjustMode="Auto"
        id="defaultTab"
      >
        <TabItemsDirective>

          {/* ------------< Tab1 >------------- */}
          <TabItemDirective
            presentation={true}
            header={this.headertext[0]}

            content={this.tabContent1}
          />


        </TabItemsDirective>
      </TabComponent>
    );
  };
  // --------------------------------------------------------------------------------------
  render() {
    return (
      <div className="control-pane">
        <div className="control-section tab-control-section">
          {/*-------------------*/}
          <button onClick={this.btnClick.bind(this)}>click here</button>
          <br />
          {/* //-----------------------------------< Tabs >--------------------- */}
          {this.ShowTabs()}
          {/* //--------------------------------------------------------------- */}
        </div>
      </div>
    );
  }
}

Answer 1

我们已经使用 content 属性中模板中的自定义数据实现了您的要求。我们已将模板和数据传递给 Tab 内容以检索 setState 更改。这个问题的原因是因为setstate 没有在Tab 内容模板中立即发生变异。请参考以下代码。

tabContent1 = (data, data1) => {  
    return (  
      <React.Fragment>  
        <p>thes controls are inside Tab Component</p>  
        <div>  
          {/* it's not working because it's inside  tabComponent */}  
          <input  
            type="text"  
            value={data.text}  
            key="nameKey1"  
            id="nameId1"  
            style={{ width: "500px" }}  
          />  
          <br />  
          <input  
            type="text"  
            value={data1.textval}  
            key="familyID1"  
            id="familyKey1"  
            style={{ width: "500px" }}  
          />  

          <button onClick={this.btnClick.bind(this)}>click hear</button>  
        </div>  
      </React.Fragment>  
    );  
  };  
  // --------------------------------------------------------------------------------------  
  btnClick = () => {  
    debugger;  
    var newName = "name :" + new Date().toTimeString();  
    var familyName = "family : " + new Date().toTimeString();  

    this.setState({ name: newName });  
    this.setState({ family: familyName });  
    //this.UpdateStateInstantly(newName);  
    // this.ShowTabs(); // no need to call this method again  

  };  
  // --------------------------------------------------------------------------------------  
  ShowTabs = () => {  
    return (  
      <TabComponent  
        ref={tab => (this.tab = tab)}  
        enablePersistence="true"  
        heightAdjustMode="Auto"  
        id="defaultTab"  
      >  
        <TabItemsDirective>  
          {console.log("ShowTabs1")}  
          {/* ------------< Tab1 >------------- */}  
          <TabItemDirective  
            presentation={true}  
            header={this.headertext[0]}  
            content={{  
              template: this.tabContent1,  
              data: { text: this.state.name, textval: this.state.family }  
            }}  
          />  
          {console.log("ShowTabs2")}  
        </TabItemsDirective>  
      </TabComponent>  
    );  
  };  

我们附上了以下示例供您参考。

示例：https://codesandbox.io/s/flamboyant-cartwright-o8isb

Answer 2

状态更新是异步的，因此您必须使用此语法来确保函数 UpdateStateInstantly 和 ShowTabs 在状态更新后立即触发，而不是之前：

btnClick = () => {
    var newName = "name :" + new Date().toTimeString();
    var familyName = "family : " + new Date().toTimeString();

    this.setState({ name: newName, family: familyName }, () => {
       this.UpdateStateInstantly(newName);
       this.ShowTabs(); 
    }); 
};

Answer 3

当我使用 Syncfusion Tab 组件时，我询问了他们的支持团队，幸运的是他们指导我找到了正确的答案：

TabContent1 = (data, data1) => { 
return ( 
  <React.Fragment> 

    <div> 
      {/* it's not working because it's inside  tabComponent */} 
      <input 
        type="text" 
        value={data.text} 
        key="nameKey1" 
        id="nameId1" 
        style={{ width: "500px" }} 
      /> 
      <br /> 
      <input 
        type="text" 
        value={data1.textval} 
        key="familyID1" 
        id="familyKey1" 
        style={{ width: "500px" }} 
      /> 

      <button onClick={this.btnClick.bind(this)}>click hear</button> 
    </div> 
  </React.Fragment> 
); 
}; 

  btnClick = () => { 

     var newName = "name :" + new Date().toTimeString(); 
     var familyName = "family : " + new Date().toTimeString(); 

     this.setState({ name: newName }); 
     this.setState({ family: familyName }); 
  }; 

  ShowTabs = () => { 
    return ( 
      <TabComponent 
      ref={tab => (this.tab = tab)} 
      enablePersistence="true" 
      heightAdjustMode="Auto" 
      id="defaultTab" 
    > 
    <TabItemsDirective> 
      {console.log("ShowTabs1")} 
      {/* ------------< Tab1 >------------- */} 
      <TabItemDirective 
        presentation={true} 
        header={this.headertext[0]} 

        // MAGIC IS THESE TWO LINES IN CONTENT
        content={{ 
          template: this.tabContent1, 
          data: { text: this.state.name, textval: this.state.family } 
        }} 
      /> 

    </TabItemsDirective> 
  </TabComponent> 
); 

};