We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Component To Component setState Handler

Thread ID:

Created:

Updated:

Platform:

Replies:

146295 Jul 30,2019 09:15 AM UTC Oct 12,2020 12:55 PM UTC React - EJ 2 5
loading
Tags: Tab
mohsen
Asked On July 30, 2019 09:15 AM UTC

i use TextBoxComponent In TabComponent When I Update State with call  setState TextBoxComponent Value Not Change
but if move TextBoxComponent Out of TabComponent it works properly !!!!

    <TabComponent
heightAdjustMode="Auto"
id="businessTabContent"
>
<TabItemsDirective>
<TabItemDirective
key={"item"}
header={this.state.headerText[0]}
content={this.state.tabContent[0]}
/>
</TabItemsDirective>
</TabComponent>




first TabContent :
<TextBoxComponent
key={"name"}
id="name"
value={this.state.name}
onChange={this.HandleChange.bind(this)}
placeholder={"name"}
floatLabelType="Auto"
/>





update state part
var newName = "newName";
this.setState({ name: newName });










Arun Palaniyandi [Syncfusion]
Replied On August 1, 2019 12:02 PM UTC

 
Hi Mohsen, 
 
Greetings from Syncfusion.  
 
We have achieved your requirement using the custom data  template in the content property. We have passed template and data to Tab content for retrieving setState changes. This issue reason is because the setstate is not immediately mutate inside the Tab content template.  Kindly refer to the following code.   
 
 
export class Default extends SampleBase { 
  state = { count: 0} 
 
  handleIncrement = () => { 
    this.setState({ count: this.state.count + 1}) 
  } 
 
  handleDecrement = () => { 
    this.setState({ count: this.state.count - 1}) 
  } 
 
  template1(data) { 
    return ( 
      <TextBoxComponent placeholder="First Name" floatLabelType="Auto" value={data.text} /> 
    ); 
  } 
  headertext = [{ text: "Rome" }, { text: "Paris" }, { text: "London" }]; 
  render() { 
    return (<div className='control-pane'> 
      <div className='control-section input-content-wrapper'> 
 
        <div className="row custom-margin custom-padding-5"> 
          <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> 
        </div> 
      </div> 
    </div>); 
  } 
 
 
 
  
We have attached the below sample for your reference. 
 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Arun P. 


Cedric E
Replied On September 17, 2020 08:01 AM UTC

Hi,

Is there a way to set the Tab component as mutable? the problem with your suggested solution is the tab always seems to refresh its content whenever the state changes. Imagine having lots of fields within the tab? 

Thanks.

Balasubramanian Sattanathan [Syncfusion]
Replied On September 18, 2020 01:57 PM UTC

Hi Cedric E, 

Thanks for the update. 

We have validated your reported scenario “the tab always seems to refresh its content whenever the state changes” at your side and we suspect that your need is to refresh the textbox alone while changing the state without refreshing the Tab component. If we have misunderstood your problem, please let us know with information about your exact requirement/problem. 

And in the meantime, kindly replicate your problem in the already shared sample or else share a sample(if possible) illustrating the problem which would help us to provide the solution at earliest. 

Regards, 
Balasubramanian S 


Guy P
Replied On October 9, 2020 07:07 PM UTC

TabComponent  - Solution no longer works. Doesn't work with react state correctly even in the old working version, as it seems to refresh the entire tab when the tab parameters haven't actually changed.



Balasubramanian Sattanathan [Syncfusion]
Replied On October 12, 2020 12:55 PM UTC

Hi Guy,  

Thanks for the update.  

We have validated your reported scenario “Doesn't work with react state correctly even in the old working version, as it seems to refresh the entire tab when the tab parameters haven't actually changed.” at your side and tried to understand your use case and requirement. But unfortunately, we are unable to understand it. So kindly share your requirement with a use case scenario, share a video demo illustrating the requirement which would help us to validate the requirement and provide the solution asap.  

Regards,  
Balasubramanian S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon