Передаешь вперед ref через Redux Form? - PullRequest
Новая
       20

Передаешь вперед ref через Redux Form?

1 голос
/ 19 сентября 2019

Я использую Redux Forms:

В Parent: 

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    console.log(this.myRef);
  }
  render() {
    return (
        <div>   
            <CustomField ref={this.ref} />
        </div>
    )
  }

В CustomField: 

import { Field } from 'redux-form';
import Child from 'components/Child';
const CustomField = props => {
  return <Field {...props} component={Child} type="text" />;
};

Мне нужно управлять фокусом на дочернем компоненте изродитель.Обычно вы использовали бы передний реф, но я не уверен, возможно ли это с Redux Forms?Следующее является ошибкой, и все реквизиты не определены: 

const CustomField = React.forwardRef((props, ref) => {
  return <Field {...props} component={() => <Child {...props} ref={ref} />} type="text" />;
});

Сообщение с консоли:

Предупреждение: Сбой типа проп: неверный компонент пропуска в поле.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2019

Я получил его, используя старый синтаксис, в котором вы передаете ссылку как обычный реквизит.Я думаю, вы должны назвать это как-то иначе, чем ref:

В Parent: 

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    console.log(this.myRef);
  }
  render() {
    return (
        <div>   
            <CustomField customRef={this.ref} />
        </div>
    )
  }

В CustomField: 

import { Field } from 'redux-form';
import Child from 'components/Child';
const CustomField = props => {
  return <Field {...props} component={Child} type="text" />;
};

In Child (не уверен, еслиэто должен быть класс или нет): 

class Child Extends React.Component {
  render(){
    return(
      <input ref={customRef}  />
    )
  }
}

Мне кажется, что работать со старым стилем проще.В качестве тангенциальной точки было бы интересно, если бы кто-нибудь мог объяснить ее недостатки, так как я предполагаю, что они есть?

0 голосов
/ 22 сентября 2019

Согласно ссылке , ваш CustomField компонент должен быть обернут в reduxForm декоратор, как показано ниже. 

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import Child from 'components/Child';


const CustomField = props => {
  return (
    <form>
      <Field  name="firstName" {...props} component={Child} type="text" />
    </form>
  )
};


export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(CustomField)
...