在输入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卡住期间反应改变父状态

回答

相关问题