使用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() 
    } 
} 

這有幫助嗎？