数ページの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>
);
}
}
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>
);
};
参考までに以下のサンプルを添付しました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加