Офисный пользовательский интерфейс ткани ясно текстовое поле - PullRequest
Новая
       7

Офисный пользовательский интерфейс ткани ясно текстовое поле

0 голосов
/ 25 октября 2018

Моя проблема в том, что я хочу очистить текстовое поле с маской из Office UI Fabric с помощью кнопки.У кого-нибудь есть план, как это сделать?

Я пытался установить значение с состоянием, но это не работает.

1 Ответ

0 голосов
/ 12 ноября 2018

Похоже, 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>
    );
  }

}

Демо

...