使用getRenderedComponent（）抛出的redux-form-material-ui总是抛出一个错误

Question

我基于official example从redux-form-material-ui repo。我的代码看起来像这样：

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"。它不会被传递得更深。

我将不胜感激任何想法如何解决它。

Answer 1

1. 您不需要将您的ref作为道具，因为它是本地的组件。如果您愿意，您可以称它为ref="field"。尽管这可能不是你的问题。
2. 此外，你可能会一直通过withRef。

这听起来像你是想叫focus()当focus道具的变化，从false到true。为此，你应该做的是这样的：

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

这有帮助吗？