1

機能の処理を担当する HOC (高次コンポーネント) を定義したいと考えています。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 is deprecatedと書かれています。それでは、 Enterキーが押されたときにタブのような動作を実現するにはどうすればよいですか。私のフォームは

<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

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

3 に答える 3

0

コールバック ref関数を使用して、フィールド間の循環に使用できる ref の配列を作成できます。16.2以降で動作します。

準備ができたら解決策を表示してください ;)

于 2018-09-02T16:52:19.437 に答える