Реагировать (ссылается на компонент): невозможно использовать "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 ()], он просто запускается без каких-либо ошибок. Я предполагаю, что есть какая- то ошибка в этой области, но я понятия не имею, как ее решить. Я думаю, что эта область видимости внутри render(return(// здесь)) и эта область видимости внутрифункции (){return(//here)} различны.

Когда я пытаюсь использовать его следующим образом, это не дает ошибок, но при каждом изменении ввода мой фокус ввода отсутствует. Но при использовании его внутри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;
    }

Что действительно нужно для рефери, мне неясно. Я прочитал документы, но я не знаю, как использовать его в этом сценарии. Я использую 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, которому нельзя что-то присвоить undefined

Я не уверен, что вы пытаетесь сделать с

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