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（// here））和这个范围在 function（）{return（ //这里）} 是不同的。

当我尝试以下面的方式使用它时，它没有给出任何错误但是在输入的每次更改时我的输入焦点都没有出来。但是当在 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}}

React（Refs to Component）：无法使用“ref”和“条件渲染”

1 个答案: