onChange for Office-fabric-react Textfield不会被调用

Question

我的组件的onChange没有触发：

<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);
}

onChanged将记录新值，但永远不会调用_onChangeTitle。

有什么建议吗？

Answer 1

在最新版本office-ui-fabric-reactTextField.change事件应按预期触发，这里有一个演示供您参考。

避免在方法render中使用箭头函数和绑定(有关更多详细信息，请参阅此处(，因为它可能会影响性能，而一种选择是在构造函数中手动绑定方法：

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;
}
}

Answer 2

使用旧版本的Typescript(@2.4.2( 的@microsoft/sharepoint脚手架，它要求我们使用尚未实现onChange功能的旧版本的office-ui-fabric-react(@5.127.0(。