office-ui-fabric-react / TextField 輸入屬性替代 onChanged

Question

我目前正在使用 office UI 結構中的 TextField，並使用 onChanged 屬性分配我的道具以響應輸入的值，類似於他們的GitHub 示例。

但是，會為每個輸入的元素調用事件處理程序。 僅當用戶完成輸入整個文本（例如焦點關閉等）時，我如何才能調用事件處理程序（this._onChange）？

我猜這比用輸入的每個字母記錄一個事件更有效。

新反應。 感謝你的幫助！

Answer 1

這更像是 React 使用輸入onChange事件的一般方式。 使用 React，您希望將輸入的值保存在某個地方，無論是組件狀態還是像 Redux 這樣的全局存儲。 您的狀態和 UI 應該始終保持同步。 因此，對於輸入/刪除的每個字符都會觸發onChange事件，以便您可以更新該狀態以反映新值。 以這種方式編寫的輸入稱為受控組件，您可以在https://reactjs.org/docs/forms.html 上閱讀有關它們的更多信息並查看一些示例。

話雖如此，您可以通過onBlur事件檢測用戶何時離開輸入，但我不建議使用它來更新具有值的狀態，因為您會看到受控組件在您不這樣做時將表現為只讀t 更新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
            />