Question

WebBrowser对于我的组件未触发：

WebBrowser

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

有什么建议吗？

Answer 1

在最新版本的office-ui-fabric-react TextField.change中应按预期触发事件，here is a demo供您参考。

避免使用箭头函数并在render方法中进行绑定（有关更多详细信息，请参见here），因为这可能会影响性能，而一种选择是在构造函数中手动绑定方法：

 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

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

不会调用Office-fabric-react Textfield的onChange

2 个答案: