在輸入onChange卡住期間反應改變父狀態

我正在構建一個由至少50個輸入組成的巨大表單。我已經寫在表格部件的功能，將輸入的值保存到窗體狀態：在輸入onChange卡住期間反應改變父狀態

父函數

saveToState(details) { 
    const { company } = this.state; 
    company[details.part][details.element] = details.value; 
    this.setState({ company }); 
    }

傳遞給子組件（INPUT）

<FieldInput 
    label="Name (as shown) *" 
    part="information" 
    element="displayName" 
    saveToState={this.saveToState} 
/>

這裏是輸入組件：

import React, { Component } from 'react'; 
export default class FieldInput extends Component { 
    render() { 
    const { label, part, element, saveToState } = this.props; 
    return (
     <div className="field"> 
     <label>{label}</label> 
     <div className="ui input"> 
      <input 
      type="text" 
      name={`${part}[${element}]`} 
      onChange={(e) => saveToState({ 
       part, 
       element, 
       value: e.target.value 
      })} 
      /> 
     </div> 
     </div> 
    ); 
    } 
}

結果每當我在輸入中輸入了一些東西它需要200-300ms才能真正顯示我在輸入中寫的內容，狀態會立即得到更新，但每當我鍵入一個字符時，我就設置父窗體的新狀態並更新它，它更新整個零件。我發現的唯一方法是在父組件內使用saveToState而不傳遞它。但是那需要1000行代碼，有沒有辦法解決這個問題？謝謝！

來源

2016-09-25 Ilan Hasanov

請記住，輸入是不受控制的（即狀態改變不會重新呈現輸入）。沒有'onChange'的表現怎麼樣？ – Kujira

有很多方法可以解決這個問題。最簡單的一個和最快的一個是使用onBlur而不是onChange這樣setState將不會發生，當您按鍵輸入但當輸入失去焦點時。

import React, { Component } from 'react'; 
export default class FieldInput extends Component { 
    render() { 
    const { label, part, element, saveToState } = this.props; 
    return (
     <div className="field"> 
     <label>{label}</label> 
     <div className="ui input"> 
      <input 
      type="text" 
      name={`${part}[${element}]`} 
      onBlur={(e) => saveToState({ 
       part, 
       element, 
       value: e.target.value 
      })} 
      /> 
     </div> 
     </div> 
    ); 
    } 
}

來源

2016-09-25 20:51:37

在輸入onChange卡住期間反應改變父狀態

回答

相關問題