Office ui fabric clear textfield

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

}

Demo

Office ui fabric clear textfield

Office ui fabric clear textfield

textfield

typescript

reactjs

office-ui-fabric