0

redux-form-material-uiリポジトリの公式の例に基づいています。私のコードは次のようになります。

import React from 'react';
import { Field } from 'redux-form';
import { TextField } from 'redux-form-material-ui';

export default class FormTextField extends React.Component {

  constructor(props) {
    super(props);
  }

  componentWillUpdate(nextProps) {
    const { name, withRef, focus } = nextProps;
    if (withRef && focus) {
      this.refs[name]
        .getRenderedComponent()
        .getRenderedComponent()
        .focus();
    }
  }

  render() {
    const { name, label, errorText, withRef } = this.props;

    return (
      <Field
        name={name}
        component={TextField}
        hintText={label}
        floatingLabelText={label}
        errorText={errorText}
        ref={name}
        withRef={withRef}
      />
    );
  }
}

focusエラーのある最初のフィールドのみにwithRefプロパティを渡しています。このフィールドでは、常にエラーが発生します。Uncaught (in promise) Error: If you want to access getRenderedComponent(), you must specify a withRef prop to Field(…)

私は両方を見ることができ、にref渡さwithRefれましたField。次に、コンポーネントでref="wrappedInstance"私はまだ見ることができますwithRef="true"。深くは渡されません。

それを解決する方法を考えていただければ幸いです。

4

1 に答える 1

2
  1. refコンポーネントに対してローカルであるため、小道具にする必要はありません。必要に応じて呼び出すことができref="field"ます。これはおそらくあなたの問題ではありませんが。
  2. また、あなたはいつも通り過ぎるかもしれませんwithRef。

prop が からに変化しfocus()たときに呼び出したいようです。そのためには、次のようなことを行う必要があります。focusfalsetrue

componentWillUpdate(nextProps) {
  if (!this.props.focus && nextProps.focus) {
    this.refs.field
      .getRenderedComponent()
      .getRenderedComponent()
      .focus()
  }
}

それは役に立ちますか？

于 2016-07-07T13:31:28.097 に答える