如何在 ReactStrap 中使用 innerRef ？ #TypeError：无法读取未定义的属性“用户名”

Posted 2023-03-23

【中文标题】如何在 ReactStrap 中使用 innerRef ？ #TypeError：无法读取未定义的属性“用户名”

【英文标题】：How to use innerRef in ReactStrap ? #TypeError: Cannot read property 'username' of undefined

【发布时间】：2020-08-24 21:48:30

【问题描述】：

我想从 Reactstrap 中的 innerRef 获取表单数据。但我收到 TypeError: Cannot read property 'username' of undefined

代码

            <FormGroup>
          <Label htmlFor="username"> Username</Label>
          <Input
            innerRef=(input) => (this.username.value = input)
            type="text"
            name="username"
            id="username"
          />
        </FormGroup>

ErrorScreenshot

【问题讨论】：

你的问题是this没有定义，所以设置username.value失败。最可能的原因是你有无状态的功能组件。尝试将其转换为类组件。为了帮助您更多，请发布您的组件的更多代码

函数组件中如何使用Inner Ref？

在功能组件内部更好地使用 useState - reactjs.org/docs/hooks-state.html 但我认为在你的情况下，你有错误的组件应该成为类，以便 this 可分配

【参考方案1】：

你可以这样做； 对于无状态函数组件：

const Header = () => 
  let username: any;
  let password: any;
  let checkbox: any;

  const handleLogin = (event: any) => 
    console.log(
      "Username" +
        username?.value +
        "Password" +
        password?.value +
        "Checkbox" +
        checkbox?.value
    );
    event.preventDefault();
  ;

  return (
    <Form onSubmit=handleLogin>
      <FormGroup>
        <Label htmlFor="username">Username</Label>
        <Input
          type="text"
          id="username"
          name="username"
          innerRef=(x) => (username = x)
        />
      </FormGroup>
      <FormGroup>
        <Label htmlFor="password">Password</Label>
        <Input
          type="password"
          id="password"
          name="password"
          innerRef=(x) => (password = x)
        />
      </FormGroup>
      <FormGroup check>
        <Label>Remember</Label>
        <Input type="checkbox" name="remember" innerRef=(x) => (checkbox = x) />
      </FormGroup>
      <Button className="bg-primary" type="submit" name="submit">
        Login
      </Button>
    </Form>
  );
;