Javascript 击键后对失去焦点的输入做出反应

我正在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>

下面是表单部分组件的示例：

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

---

React在每个关键点笔划上重新呈现DOM。尝试将值设置为附加到组件状态的变量，如下所示：

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

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

this.setState{text}

---

value={this.state.text}>你能展示你的updatevalue函数吗？看起来像是答案的关键。当然，你是指在减速机中还是在容器中的函数？也许可以编辑你的问题，使其易于查看。当然，我现在会添加一些代码，请求添加的信息。这仍然是完全相同的问题吗？关键一击后失去焦点？或者您可以提供的关于更改的任何其他信息？抱歉，我应该说-现在的问题是，我无法使用此更新版本输入信息，这是有意义的，因为在我看来，state.value在每个状态更改上都设置为空字符串，这是此组件的每次击键。就我所有的改变而言，这就是我的全部。我整天都在添加和删除组件上的键和引用，并将组件从无状态更改为有状态，希望有些东西能起作用，但似乎什么也没发生。我还一直在尝试使用shouldComponentUpdate和componentWillMount生命周期方法来阻止组件在状态更改时进行更新，但毫无效果。我认为问题可能出在FormWrapperBuilder中，因为它是组件包装的FormWrapper，失去了对ref和key的关注。如果实施不当，这可能会把事情搞砸。也可以使用onChangeText而不是onDOMChange。我测试了刚刚编辑答案的代码片段，结果成功了

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