在Redux表单中的Enter上专注于下一个输入字段 [英] Focus on next Input field on Enter in Redux Form

问题描述

我想定义一个HOC(高阶组件)，它将负责处理功能.从'react'导入React，{组件};

I want to define a HOC(higher order Component) which will be responsible for handling the functionality. import React, { Component } from 'react';

const NextFieldOnEnter = WrappedContainer =>
  class extends Component {
    componentDidMount() {
      console.log('hoc', this.refs);
      //move to next input field
    }
    render() {
      return <WrappedContainer {...this.props} />;
    }
  };
export default NextFieldOnEnter;

说 this.refs已过时.因此，当按下 enter 键时，如何实现类似于 tab 的行为.我的表格是

It says this.refs is deprecated. So how can I achieve tab like behavior when enter key is pressed. My form is

<Form>
<Field
  withRef
  hasFeedback
  name="name"
  ref={ref => {
    this.field1 = ref;
  }}
  refField = "field1"
  component={makeField}
  type="date"
/>  
<Field
    withRef
    hasFeedback
    name="address"
    ref={ref => {
      this.field2 = ref;
    }}
     refField ="field2"
    component={makeField}
    type="date"
  />
</Form>

//makefield

//makefield

render() {
  const {type, input, label, ref, refField, ...rest} = this.props;
  return (
    <Form.Item
      label={label}
      colon={false}
      type={type}
      value={value}
      ref={ref}
    >
      <Input {...props} />
    </Form.Item>
  );
}

推荐答案

在构造函数方法中，定义您的ref

In your constructor method define your ref like this

constructor(props) {
  super(props);
  this.field1 = React.createRef();
  this.field2 = React.createRef();
}

在使用 ref 的渲染器中执行此操作.

In your render where you are using ref do this.

<Field
  withRef
  hasFeedback
  name="name"
  ref={this.field1} // Proper way to assign ref in react ver 16.4
  refField = "field1"
  component={makeField}
  type="date"
/>  

参考参考文档React

这篇关于在Redux表单中的Enter上专注于下一个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！