Question

我有一个只有几页的syncfusion选项卡控件，它显示了状态变量中设置的值，每当我通过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> 
);

};

元素值更改时，Syncfusion选项卡控件的值不会刷新

3 个答案: