React輸入在擊鍵後失去焦點

Question

我在React/Redux中構建了一個應用程序，並且我有一些輸入字段會在每次擊鍵後失去焦點。我的代碼如下所示：

<General fields={props.general} 
    onChange={value => props.updateValue('general', value)} /> 

<FormWrapper> 
    <Network fields={props.network} 
     onChange={value => props.updateValue('network', value} /> 
    </NetworkTableForm> 
</FormWrapper> 

General和Network只包含形式的不同部分和FormWrapper可以包裝形式的一個分部和提供一些有趣的可視化。問題是General中的所有字段都正常工作，但每次擊鍵後Network中的字段都會丟失焦點。我已經嘗試追加鍵到一堆不同的元素，如GeneralNetwork,FormWrapper和我的組件包裝我的輸入字段，我沒有使用redux-form的原因是因爲它不適用於UI框架我正在使用（Grommet）。任何想法可能會造成這種情況？

編輯：根據請求添加更多的代碼。下面是完整的組件：

const InfoForm = (props) => { 

    let FormWrapper = FormWrapperBuilder({ 
     "configLists": props.configLists, 
     "showForm": props.showForm, 
     "loadConfiguration": props.loadConfiguration, 
     "updateIndex": props.updateIndex, 
     "metadata": props.metadata}) 

    return (
     <CustomForm onSubmit={() => console.log('test')} 
      loaded={props.loaded} heading={'System Details'} 
      header_data={props.header_data} 
      page_name={props.general.name} > 

      <General fields={props.general} 
       onChange={(field, value) => props.updateValue('general', field, value)} /> 

      <FormWrapper labels={["Interface"]} fields={["interface"]} component={'network'}> 
       <Network fields={props.network} 
        onChange={(field, value) => props.updateValue('network', field, value)} /> 
      </FormWrapper> 

      <User fields={props.user} 
       onChange={(field, value) => props.updateValue('user', field, value)} /> 


     </CustomForm> 
    ) 
} 

export default InfoForm 

這裏有一個表格部分組件的例子：

const Network = ({fields, onChange}) => (
    <CustomFormComponent title='Network'> 
     <CustomTextInput value={fields.interface} label='Interface' 
      onChange={value => onChange('interface', value)} /> 

     <CustomIPInput value={fields.subnet} label='Subnet' 
      onChange={value => onChange('subnet', value)} /> 

     <CustomIPInput value={fields.network} label='Network' 
      onChange={value => onChange('network', value)} /> 

     <CustomIPInput value={fields.gateway} label='Gateway' 
      onChange={value => onChange('gateway', value)} /> 

     <CustomIPInput value={fields.nat_ip} label='NAT' 
      onChange={value => onChange('nat_ip', value)} /> 
    </CustomFormComponent> 
) 

export default Network 

這裏的自定義輸入一個的例子：

const CustomTextInput = ({label, value, onChange}) => (
    <FormField label={<Label size='small'>{label}</Label>}> 
     <Box pad={{'horizontal': 'medium'}}> 
      <TextInput placeholder='Please Enter' value={value} 
       onDOMChange={event => onChange(event.target.value)} 
      /> 
     </Box> 
    </FormField> 
) 

export default CustomTextInput 

而這裏的FormWrapperBuilder功能：

const FormWrapperBuilder = (props) => 
    ({component, labels, fields, children=undefined}) => 
     <VisualForm 
      configLists={props.configLists[component]} 
      showForm={visible => props.showForm(component, visible)} 
      loadConfiguration={index => props.loadConfiguration(component, index)} 
      updateIndex={index => props.updateIndex(component, index)} 
      metadata={props.metadata[component]} 
      labels={labels} fields={fields} > 
      {children} 
     </VisualForm> 

export default FormWrapperBuilder 

所有這些都保存在單獨的文件中，這可能會影響頁面的重新渲染，並且它是封裝在FormWrapper中的函數，在狀態更改後會丟失焦點。另外我也嘗試過給這些組件添加按鍵，沒有任何運氣。此外，這裏的功能在我的容器組件：

const mapDispatchToProps = (dispatch) => { 
    return { 
     'updateValue': (component, field, value) => { 
      dispatch(updateValue(component, field, value))}, 

     'showForm': (component, visible) => { 
      dispatch(showForm(component, visible)) 
     }, 

     'loadConfiguration': (component, index) => { 
      dispatch(loadConfiguration(component, index)) 
     }, 

     'pushConfiguration': (component) => { 
      dispatch(pushConfiguration(component)) 
     }, 

     'updateIndex': (component, index) => { 
      dispatch(updateIndex(component, index)) 
     } 
    } 
} 

編輯2：修改我的自定義文本輸入作爲如每哈達的答案。同時還用鑰匙和裁片將其粗加工成很好的尺寸

export default class CustomTextInput extends React.Component { 

    constructor(props) { 
     super(props) 
     this.state = {value: ""} 
    } 

    render() { 
     return (
      <FormField key={this.props.label} ref={this.props.label} label={<Label size='small'>{this.props.label}</Label>}> 
       <Box key={this.props.label} ref={this.props.label} pad={{'horizontal': 'medium'}}> 
        <TextInput placeholder='Please Enter' value={this.state.value} key={this.props.label} ref={this.props.label} 
        onDOMChange={event => { this.props.onChange(event.target.value); this.state.value = event.target.value }} /> 
       </Box> 
      </FormField> 
     ) 
    } 
} 

Answer 1

React在每個關鍵筆劃上重新呈現DOM。嘗試設置值附加到組件的狀態像這樣的變量：

<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text}></TextInput