1

我是新来的反应。我无法弄清楚如何使这项工作。

这 [参考组件]

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(//here))内部的这个范围和function(){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;
    }

我不清楚 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);
4

1 回答 1

0

您通常不需要使用 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}}

于 2017-06-15T02:12:10.590 回答