onChanged之外的office-ui-fabric-react / TextField输入属性

Question

我目前正在使用office UI fabric中的TextField，并使用onChanged属性在react中为我的属性赋值，输入的值类似于它们的GitHub example。

但是，对于输入的每个元素，都会调用事件处理程序。当用户完成整个文本的输入(例如焦点解除等)时，我如何调用事件处理程序(this._onChange)？

我猜这会比在输入每个字母的情况下记录事件效率更高。

新的反应。感谢您的帮助！

Answer 1

这更像是React使用输入onChange事件的通用方式。使用React，您希望将输入的值保存在某个状态中，无论是组件状态还是像Redux这样的全局存储。你的状态和UI应该和保持同步。因此，对于输入/删除的每个字符，都会触发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>

​

Answer 2

您可以考虑使用React的onBlur属性，该属性将在输入失去焦点时调用。下面是一个代码依赖示例，当<TextField>组件失去焦点时，它就是window.alert组件的当前值：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')
);

我希望这对你有帮助。

参考

• https://reactjs.org/docs/events.html#focus-events

Answer 3

您可以使状态和UI保持同步，但可以使用自己的延迟验证错误检查函数来检查值是好是坏，以及/或者您是否希望仅在经过一定时间后才根据该值进行日志记录。下面复制了这个页面中的一些示例，以供快速参考-您可以在"_getErrorMessage“函数(https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx)中做任何您想做的事情：

            <TextField
              label="Deferred string-based validation"
              placeholder="Validates after user stops typing for 2 seconds"
              onGetErrorMessage={this._getErrorMessage}
              deferredValidationTime={2000}
            />
            <TextField
              label="Validates only on focus and blur"
              placeholder="Validates only on input focus and blur"
              onGetErrorMessage={this._getErrorMessage}
              validateOnFocusIn
              validateOnFocusOut
            />