时间戳

首页 > 解决方案 > syncfusion 输入字段未连接到状态

reactjs - syncfusion 输入字段未连接到状态

问题描述

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

我在 TabComponent 中使用 syncfusion TextBoxComponent 作为 tabContent ，并且我有一个 syncfusion Grid 。我希望在单击其中一行时显示 TextBoxComponent 中的当前行值，例如 Name 列，但它不起作用。当我将 textBoxComponent 移出 TabComponent 时，它在这种情况下运行良好并显示数据。

constructor(props) {
 super(props)

   this.state = {
      name: "",
    tabConfig: {

        headerText: [
            {
                text: "Header_1",
                iconCss: "fa fa-home"
            }
        ],

        tabContent: [
            this.createTabPanel1,        
        ]
    }
  }
 }


 //handle Grid rowSelecting
this.businessTableRowSelected = target => { 
   const newName = target.data.name;
   this.setState({name:newName})

}

 //Call when TextBoxComponent value Change
  businessFormInputHandleChange = e => {

//e.preventDefault nont work when TextComponent inside of TabComponent
//but when move  TextComponent out of TabComponent it works well 
//e.preventDefault();

const name = e.currentTarget.value;  
     this.setState({ name: name });

  }


 //Tab Content
   createTabPanel1 = () => {

 return (
      <React.Fragment>
        <TextBoxComponent
          key={"name"}
          id="name"
          value={this.state.name}
          onChange={this.businessFormInputHandleChange.bind(this)}
          placeholder={"name"}
          floatLabelType="Auto"
        />
      </React.Fragment>
    );
 }




 Render() {
   return(

 <TabComponent heightAdjustMode="Auto" id="businessTabContent">
    <TabItemsDirective>
        {

            tabListNumber.map(item => {
                return (
                    <TabItemDirective
                        key={item}
                        header={this.state.tabConfig.headerText[item]}
                        content={this.state.tabConfig.tabContent[item]}
                    />
                );
            })}
    </TabItemsDirective>
    </TabComponent>
  )
}

标签： reactjssyncfusion

解决方案

来自 Syncfusion 的问候。

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

模板1（数据）{返回（）；}

      <TabComponent ref={(tab) => { this.tabObj = tab }} showCloseButton={true} heightAdjustMode='None' height={320}>
        <TabItemsDirective>
          <TabItemDirective header={this.headertext[0]}
            content={{
              template: this.template1,
              data: { text: this.state.count }
            }} />
        </TabItemsDirective>
      </TabComponent>
      <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
        <input type="text" id="text1" value={this.state.count} />
      </div>
      <button onClick={this.handleIncrement}>Increment by 1</button>
      <button onClick={this.handleDecrement}>Decrement by 1</button>

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

示例：https ://stackblitz.com/edit/react-3ngtcw-uwwh27?file=index.js

如果您需要进一步的帮助，请告诉我们。

问候，阿伦 P。

推荐阅读