Office ui面料清除文本字段

Question

我的問題是我想用一個按鈕清除Office UI Fabric中的帶遮罩的文本字段。 有沒有人計划如何做到這一點？

我試圖用狀態來設置值，但這不起作用。

Answer 1

看來MaskedTextField也不直接支持它，至少沒有value屬性或setValue函數不會導致組件重新呈現。

但是，重新安裝組件的技術（例如，請參見此處 ）在這里很有用。 要重置值，將實例化並安裝MaskedTextField組件的新實例，為此引入了以下組件：

class MaskedTextFieldWrapper extends React.Component<any, any> {
  private textFieldRef: React.RefObject<MaskedTextField>;

  public generateKey(prefix:string): string {
    return `${ prefix }_${ new Date().getTime() }`;
  }

  public render(): JSX.Element {
    if(this.props.resetValue){
      return <MaskedTextField key={ this.generateKey("textfield")} value='' ref={this.textFieldRef} {...this.props} />;  
    }
    return <MaskedTextField ref={this.textFieldRef} {...this.props} />;
  }
}

現在可以像這樣重置MaskedTextField的值：

class TextFieldExample extends React.Component<any, any> {

  constructor(props:any) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      resetValue: false
    };
}


  public handleClick():any {
    this.setState({resetValue: true});
  }

  public render(): JSX.Element {
    return (
      <div>
        <MaskedTextFieldWrapper resetValue={this.state.resetValue}  label="With number mask" mask='9999' />
        <PrimaryButton onClick={this.handleClick}>Clear</PrimaryButton>
      </div>
    );
  }

}

演示