击键后反应输入失去焦点

我正在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 中的字段都会失去焦点 . 我已经尝试将键附加到一堆不同的元素，例如 General Network ， FormWrapper 和我的组件包装我的输入字段以及我正在使用的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

所有这些都保存在单独的文件中，这些文件可能会影响页面的重新呈现，而且是在状态更改后丢失focues的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：根据Hadas的回答修改我的自定义文本输入 . 还用钥匙和参考板来做好准备

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>
        )
    }
}