Question

我目前正在使用Office UI结构中的TextField，并使用onChanged属性来分配我的道具，以使其输入的值类似于其GitHub example。

但是，将为每个输入的元素调用事件处理程序。仅当用户完成输入整个文本时（例如，焦点关闭等），如何调用事件处理程序（this._onChange）？

我想这会比记录每个输入字母的事件更有效。

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

Answer 1

这更像是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>

Answer 2

您可以考虑使用React的onBlur道具，当输入失去焦点时将调用该道具。这是一个示例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')
);

希望您会有所帮助。

参考

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
            />

office-ui-fabric-react / TextField输入属性替代onChanged

3 个答案: