Component To Component setState Handler

[mohsen]

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]

 

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. 

 

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

 

 

Please let us know if you need further assistance. 

 

Regards, 

Arun P. 

[Cedric E]

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]

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]

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.

https://stackblitz.com/edit/react-3ngtcw-sikyxr?file=index.js

[Balasubramanian Sattanathan]

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