Входные свойства office-ui-fabric-реагировать / TextField, альтернативные onChanged - PullRequest
Новая
       8

Входные свойства office-ui-fabric-реагировать / TextField, альтернативные onChanged

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

В настоящее время я использую матрицу TextField из пользовательского интерфейса офиса и использую свойство onChanged, чтобы назначить моему реквизиту в ответ вводимое значение, подобное их примеру GitHub .

Однакообработчик события вызывается для каждого вводимого элемента.Как я могу сделать вызов обработчику событий (this._onChange), только когда пользователь заканчивает ввод всего текста (например, при отклонении фокуса и т. Д.)?

Я предполагаю, что это будет более эффективно, чем ведение журналасобытие с каждой вводимой буквой.

Новое, чтобы реагировать.Ценю вашу помощь!

Ответы [ 2 ]

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

Вы можете использовать onBlur опору React, которая будет вызываться, когда вход теряет фокус.Вот пример Codepen, который window.alert является текущим значением компонента <TextField>, когда он теряет фокус: https://codepen.io/kevintcoughlin/pen/zmdaJa?editors=1010.

Вот код: 

const { 
  Fabric,
  TextField
} = window.Fabric;

class Content extends React.Component {
  public render() {    
    return (
      <Fabric>
        <TextField onBlur={this.onBlur} />
      </Fabric>
    );
  }

  private onBlur(ev: React.FocusEvent<HTMLInputElement>) {
    window.alert(ev.target.value);
  }
}

ReactDOM.render( 
  <Content />,
  document.getElementById('content')
);

Надеюсь, вы найдетечто полезно.

Ссылки

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

Это более общий способ, которым React использует событие ввода onChange.С React вы хотите где-то сохранять значение вашего ввода в каком-либо состоянии, будь то состояние компонента или глобальное хранилище, такое как Redux.Ваше состояние и пользовательский интерфейс должны всегда синхронизироваться.Из-за этого событие onChange запускается для каждого введенного / удаленного символа, так что вы можете обновить это состояние, чтобы отразить новое значение.Входы, написанные таким образом, называются контролируемыми компонентами, и вы можете прочитать о них больше и посмотреть некоторые примеры на https://reactjs.org/docs/forms.html.

. При этом вы можете определить, когда пользователь покидает вход с помощью события onBlur, хотяЯ бы не рекомендовал использовать это для обновления состояния со значением, так как вы увидите, что контролируемый компонент будет действовать только для чтения, если вы не обновите состояние в событии onChange.Вам придется использовать неконтролируемый компонент, обычно устанавливая начальное значение с defaultValue вместо value и усложняя для себя вещи. 

// CORRECT IMPLEMENTATION
class ControlledForm extends React.Component {
  constructor(props, context) {
    super(props, context);
    
    this.state = {
      name: 'example'
    };
    
    this.handleNameChange = this.handleNameChange.bind(this);
  }
  
  handleNameChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <h1>Controlled Form</h1>
        <input type="text" value={this.state.name} onChange={this.handleNameChange} />
        <p>{this.state.name}</p>
      </div>
    );
  }
}

// INPUT DOES NOT WORK
class BuggyUncontrolledForm extends React.Component {
  constructor(props, context) {
    super(props, context);
    
    this.state = {
      name: 'example'
    };
  }
  
  render() {
    return (
      <div>
        <h1>Buggy Uncontrolled Form</h1>
        <input type="text" value={this.state.name}  />
        <p>{this.state.name}</p>
      </div>
    );
  }
}

// NOT RECOMMENDED
class UncontrolledForm extends React.Component {
  constructor(props, context) {
    super(props, context);
    
    this.state = {
      name: 'example'
    };
    
    this.handleNameChange = this.handleNameChange.bind(this);
  }
  
  handleNameChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <h1>Uncontrolled Form</h1>
        <input type="text" defaultValue={this.state.name} onBlur={this.handleNameChange} />
        <p>{this.state.name}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <ControlledForm />
    <BuggyUncontrolledForm />
    <UncontrolledForm />
  </div>
, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
...