Office ui 织物清除文本字段答案

【问题标题】：Office ui fabric clear textfieldOffice ui 织物清除文本字段
【发布时间】：2019-03-29 19:32:13
【问题描述】：

我的问题是我想用一个按钮从 Office UI Fabric 中清除一个蒙版文本字段。有没有人计划如何做到这一点？

我尝试使用状态设置值，但不起作用。

【问题讨论】：

标签： reactjs typescript textfield office-ui-fabric

【解决方案1】：

看来MaskedTextField 并不直接支持它，至少value 属性和setValue 函数都不会导致组件重新渲染。

但是重新安装组件的技术（例如，参见here）在这里起到了拯救作用。为了重置一个值，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>
    );
  }

}

Demo

【讨论】：