反應（Refs to Component）：無法將「ref」與「條件呈現」結合使用

Question

我是新來的反應。我無法弄清楚如何完成這項工作。

這[參考文獻到組件]

ref={(node) => {this.loginMobileInput = node}} 

給了我錯誤

Uncaught (in promise) TypeError: Cannot set property 'loginMobileInput' of undefined 
    at ref (eval at ./app/containers/Login/index.js ... 

時與組件

<Input 
     style={{marginTop: "5%"}} 
     size="large" 
     placeholder="Enter your mobile number" 
     prefix={<Icon type="mobile" />} 
     suffix={suffix} 
     value={loginMobile} 
     onChange={onChangeLoginMobile} 
     ref={(node) => {this.loginMobileInput = node}} 
    /> 

在某些條件下返回此函數內

function LoginScreen(props) {} 

當我直接使用[沒有任何條件呈現即直接在渲染（）]它只運行沒有任何錯誤。 我假設有一些這個範圍錯誤，但我不知道如何解決這個問題。 我認爲什麼是內這範圍渲染（返程（//這裏））和這範圍內功能（）{回報（//這裏）}是不同的。

當我嘗試以下面的方式使用它時，它不會給出任何錯誤，但是在每次輸入更改時，我的輸入焦點都已關閉。但是在內部使用它時render(return(//directly here with component))它工作得很好。

let loginMobileInput = this.loginMobileInput; 

    function LoginScreen(props) { 

     const user = props.user; 
     if (user) { 
     return <User user={user}/>; 
     } 
     else{ 
     return <div> 
       <div style={{width:"100%",textAlign:"center",marginBottom: "3%",fontFamily: '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'+" !important"}}> 
        <p>Get Started</p> 
        <p>Enter your details to continue</p> 
       </div> 
       <Card> 
        <Input 
        style={{marginTop: "5%"}} 
        size="large" 
        placeholder="Enter your mobile number" 
        prefix={<Icon type="mobile" />} 
        suffix={suffix} 
        value={loginMobile} 
        onChange={onChangeLoginMobile} 
        ref={(node) => {loginMobileInput = node}} 
        /> 
        <Button onClick={onSubmitLoginMobile} style={{width:"100%", marginTop:"6%"}} size="large" type="default">Continue</Button> 
       </Card> 
       </div> 
     } 

     return null; 
    } 

什麼ref實際上需要我不清楚。我閱讀了文檔，但我不知道如何在這種情況下使用它。 我使用antd作爲組件庫，我認爲這與此錯誤無關。

我希望我正確地問了我的問題。這個你能幫我嗎。

下面是我正在運行的整個代碼。

export class Login extends React.Component { // eslint-disable-line react/prefer-stateless-function 

    render() { 

    const { loginMobile, user, userCheckRequest } = this.props; 
    const { onChangeLoginMobile, onSubmitLoginMobile } = this.props; 

    const suffix = loginMobile ? <Icon type="close-circle" onClick={this.props.clearMobile} /> : null; 

    function LoginScreen(props) { 

     const user = props.user; 
     if (user) { 
     return <User user={user}/>; 
     } 
     else{ 
     return <div> 
       <div style={{width:"100%",textAlign:"center",marginBottom: "3%",fontFamily: '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'+" !important"}}> 
        <p>Get Started</p> 
        <p>Enter your details to continue</p> 
       </div> 
       <Card> 
        <Input 
        style={{marginTop: "5%"}} 
        size="large" 
        placeholder="Enter your mobile number" 
        prefix={<Icon type="mobile" />} 
        suffix={suffix} 
        value={loginMobile} 
        onChange={onChangeLoginMobile} 
        ref={(node) => {this.loginMobileInput = node}} // HERE IT THROWS AN ERROR 
        /> 
        <Button onClick={onSubmitLoginMobile} style={{width:"100%", marginTop:"6%"}} size="large" type="default">Continue</Button> 
       </Card> 
       </div> 
     } 

     return null; 
    } 

    return (
     <div> 
     <HeaderLarge /> 
     <Row style={{marginTop: "5%"}}> 
      <Col span={9}></Col> 
      <Col span={6}> 
       <LoginScreen user={user}/> 
      </Col> 
      <Col span={9}></Col> 
     </Row> 
     <Row> 
      <Col span={9}></Col> 
      <Col span={6}> 
      </Col> 
      <Col span={9}></Col> 
     </Row> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    loginMobile: loginMobileSelector(), 
    user: userSelector(), 
    userCheckRequest: userCheckRequestSelector(), 
}); 

export function mapDispatchToProps(dispatch) { 
    return { 
    onChangeLoginMobile: (evt) => dispatch(changeMobile(evt.target.value)), 
    clearMobile:() => dispatch(clearMobile()), 
    onSubmitLoginMobile:() => dispatch(checkUserRequested()) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Login); 

Answer 1

你通常不需要使用ref，我認爲antd不會公開ref道具。並且很可能不需要它。

Uncaught (in promise) TypeError: Cannot set property 'loginMobileInput' of undefined 
    at ref (eval at ./app/containers/Login/index.js ... 

只是意味着該this.loginMobileInput是undefined，你不能ASIGN東西undefined

我不知道你正在嘗試與

ref={(node) => {this.loginMobileInput = node}}