onChange for Office-fabric-react Textfield doesn't get called
onChange for my component is not firing:
<TextField
label = "City"
required = {true}
placeholder = "Location"
value = {this.props.location && this.props.location.Title ? this.props.location.Title : ""}
onChange = {this._onChangeTitle.bind(this)}
onChanged = {(newValue: string) => {
console.log("onChanged | newValue: ", newValue);
}}
private _onChangeTitle(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
console.log("AddRemoveComponent | _onChangeTitle | newValue: ", newValue);
this._location.Title = newValue;
console.log("AddRemoveComponent | _onChangeTitle | this._location.Title: ", this._location.Title);
}
The onChanged will log the new value, but _onChangeTitle is never called.
Any suggestions?
javascript typescript
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
add a comment |
onChange for my component is not firing:
<TextField
label = "City"
required = {true}
placeholder = "Location"
value = {this.props.location && this.props.location.Title ? this.props.location.Title : ""}
onChange = {this._onChangeTitle.bind(this)}
onChanged = {(newValue: string) => {
console.log("onChanged | newValue: ", newValue);
}}
private _onChangeTitle(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
console.log("AddRemoveComponent | _onChangeTitle | newValue: ", newValue);
this._location.Title = newValue;
console.log("AddRemoveComponent | _onChangeTitle | this._location.Title: ", this._location.Title);
}
The onChanged will log the new value, but _onChangeTitle is never called.
Any suggestions?
javascript typescript
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
add a comment |
onChange for my component is not firing:
<TextField
label = "City"
required = {true}
placeholder = "Location"
value = {this.props.location && this.props.location.Title ? this.props.location.Title : ""}
onChange = {this._onChangeTitle.bind(this)}
onChanged = {(newValue: string) => {
console.log("onChanged | newValue: ", newValue);
}}
private _onChangeTitle(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
console.log("AddRemoveComponent | _onChangeTitle | newValue: ", newValue);
this._location.Title = newValue;
console.log("AddRemoveComponent | _onChangeTitle | this._location.Title: ", this._location.Title);
}
The onChanged will log the new value, but _onChangeTitle is never called.
Any suggestions?
javascript typescript
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
onChange for my component is not firing:
<TextField
label = "City"
required = {true}
placeholder = "Location"
value = {this.props.location && this.props.location.Title ? this.props.location.Title : ""}
onChange = {this._onChangeTitle.bind(this)}
onChanged = {(newValue: string) => {
console.log("onChanged | newValue: ", newValue);
}}
private _onChangeTitle(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
console.log("AddRemoveComponent | _onChangeTitle | newValue: ", newValue);
this._location.Title = newValue;
console.log("AddRemoveComponent | _onChangeTitle | this._location.Title: ", this._location.Title);
}
The onChanged will log the new value, but _onChangeTitle is never called.
Any suggestions?
javascript typescript
javascript typescript
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
asked Sep 24 '18 at 17:26
Holden1515Holden1515
1289
1289
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
In the latest version of office-ui-fabric-react TextField.change event should be triggered as expected, here is a demo for your reference.
Avoid arrow functions and bind in render method (see here for a more details) since it might affect the performance, instead one option would be to manually bind the methods in the constructor:
export class TextFieldBasicExample extends React.Component<any, any> {
private location: {Title:string};
constructor(props: {}) {
super(props);
this.location = {Title:""};
this.onChange = this.onChange.bind(this);
this.onChanged = this.onChanged.bind(this);
}
public render(): JSX.Element {
return (
<div>
<TextField
onChange = {this.onChange}
onChanged={this.onChanged} />
</div>
);
}
private onChange(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
this.location.Title = newValue;
}
private onChanged(newValue: string): void {
this.location.Title = newValue;
}
}
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
1
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
add a comment |
With the @microsoft/sharepoint scaffolding using older versions of Typescript (@2.4.2) it requires us to use an older version of office-ui-fabric-react (@5.127.0) which hasn't implemented onChange function yet.
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52484458%2fonchange-for-office-fabric-react-textfield-doesnt-get-called%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In the latest version of office-ui-fabric-react TextField.change event should be triggered as expected, here is a demo for your reference.
Avoid arrow functions and bind in render method (see here for a more details) since it might affect the performance, instead one option would be to manually bind the methods in the constructor:
export class TextFieldBasicExample extends React.Component<any, any> {
private location: {Title:string};
constructor(props: {}) {
super(props);
this.location = {Title:""};
this.onChange = this.onChange.bind(this);
this.onChanged = this.onChanged.bind(this);
}
public render(): JSX.Element {
return (
<div>
<TextField
onChange = {this.onChange}
onChanged={this.onChanged} />
</div>
);
}
private onChange(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
this.location.Title = newValue;
}
private onChanged(newValue: string): void {
this.location.Title = newValue;
}
}
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
1
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
add a comment |
In the latest version of office-ui-fabric-react TextField.change event should be triggered as expected, here is a demo for your reference.
Avoid arrow functions and bind in render method (see here for a more details) since it might affect the performance, instead one option would be to manually bind the methods in the constructor:
export class TextFieldBasicExample extends React.Component<any, any> {
private location: {Title:string};
constructor(props: {}) {
super(props);
this.location = {Title:""};
this.onChange = this.onChange.bind(this);
this.onChanged = this.onChanged.bind(this);
}
public render(): JSX.Element {
return (
<div>
<TextField
onChange = {this.onChange}
onChanged={this.onChanged} />
</div>
);
}
private onChange(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
this.location.Title = newValue;
}
private onChanged(newValue: string): void {
this.location.Title = newValue;
}
}
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
1
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
add a comment |
In the latest version of office-ui-fabric-react TextField.change event should be triggered as expected, here is a demo for your reference.
Avoid arrow functions and bind in render method (see here for a more details) since it might affect the performance, instead one option would be to manually bind the methods in the constructor:
export class TextFieldBasicExample extends React.Component<any, any> {
private location: {Title:string};
constructor(props: {}) {
super(props);
this.location = {Title:""};
this.onChange = this.onChange.bind(this);
this.onChanged = this.onChanged.bind(this);
}
public render(): JSX.Element {
return (
<div>
<TextField
onChange = {this.onChange}
onChanged={this.onChanged} />
</div>
);
}
private onChange(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
this.location.Title = newValue;
}
private onChanged(newValue: string): void {
this.location.Title = newValue;
}
}
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
In the latest version of office-ui-fabric-react TextField.change event should be triggered as expected, here is a demo for your reference.
Avoid arrow functions and bind in render method (see here for a more details) since it might affect the performance, instead one option would be to manually bind the methods in the constructor:
export class TextFieldBasicExample extends React.Component<any, any> {
private location: {Title:string};
constructor(props: {}) {
super(props);
this.location = {Title:""};
this.onChange = this.onChange.bind(this);
this.onChanged = this.onChanged.bind(this);
}
public render(): JSX.Element {
return (
<div>
<TextField
onChange = {this.onChange}
onChanged={this.onChanged} />
</div>
);
}
private onChange(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void {
this.location.Title = newValue;
}
private onChanged(newValue: string): void {
this.location.Title = newValue;
}
}
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
answered Sep 28 '18 at 22:20
Vadim GremyachevVadim Gremyachev
36.3k771114
36.3k771114
1
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
add a comment |
1
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
1
1
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
Thanks for the info, I'm still learning best practices. I'll look into making those change!
– Holden1515
Oct 1 '18 at 13:17
add a comment |
With the @microsoft/sharepoint scaffolding using older versions of Typescript (@2.4.2) it requires us to use an older version of office-ui-fabric-react (@5.127.0) which hasn't implemented onChange function yet.
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
add a comment |
With the @microsoft/sharepoint scaffolding using older versions of Typescript (@2.4.2) it requires us to use an older version of office-ui-fabric-react (@5.127.0) which hasn't implemented onChange function yet.
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
add a comment |
With the @microsoft/sharepoint scaffolding using older versions of Typescript (@2.4.2) it requires us to use an older version of office-ui-fabric-react (@5.127.0) which hasn't implemented onChange function yet.
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
With the @microsoft/sharepoint scaffolding using older versions of Typescript (@2.4.2) it requires us to use an older version of office-ui-fabric-react (@5.127.0) which hasn't implemented onChange function yet.
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
answered Nov 14 '18 at 23:02
Holden1515Holden1515
1289
1289
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52484458%2fonchange-for-office-fabric-react-textfield-doesnt-get-called%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
