时间戳

首页 > 解决方案 > 使用其内部 tabComponent 时，syncfusion 输入字段未连接到状态

reactjs - 使用其内部 tabComponent 时，syncfusion 输入字段未连接到状态

问题描述

我已经尝试了很多方法来找到我的问题的解决方案，也搜索了很多但找不到我的解决方案。

我使用syncfusion TabComponent在tabcontent中显示一个输入html，我希望在单击按钮更新状态并更改输入值时，但第一个tabContent中的输入其值不会改变。但是标签内容之外的输入效果很好

 import React, { Component } from "react"; import { TabComponent, 
TabItemDirective, TabItemsDirective } from "@syncfusion/ej2-react- 
navigations";

 export default class FormDataBinding extends Component {
constructor(props) { super(props);

 this.state = {
   name: "name"
  };
}

 btnClick = () => {
 let newName = new Date();

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

    tabContent1 = () => {
   return (
    <div>
  {/* it's not working because it's inside  tabComponent */}
  <input type="text" value={this.state.name} key="name" id="name"> 
 </input>

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

    render() {
   let headertext;
  // Mapping Tab items Header property
   headertext = [{ text: "Twitter", iconCss: "e-twitter" }];

  return (
    <div className="control-pane">
   <div className="control-section tab-control-section">
     {/* it works */}
    <input
   type="text"
   value={this.state.name}
   key="name"
 id="name"
  ></input>
  {/*--------------*/}

     <TabComponent heightAdjustMode="Auto" id="defaultTab">
     <TabItemsDirective>
      <TabItemDirective
       header={headertext[0]}
    content={this.tabContent1.bind(this)}
        />
      </TabItemsDirective>
   </TabComponent>
  </div>
    </div>
         );
  }
  }`

标签： reactjssyncfusion

解决方案

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

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

问候，

卡尔蒂

推荐阅读