React typescript无法从ref对象获取值

Question

我有一个react typescript项目，并且登录表单有问题 这是响应登录表单代码。

登录-form.tsx

import * as React from 'react';
import {
    Button,
    FormGroup,
    Input,
    Label
} from 'reactstrap';
import {observer} from 'mobx-react';

@observer
export class LoginForm extends React.Component {
    form: any;
    username: any;
    password: any;
    OnLogin (){
      console.log("username:",this.username);
      console.log("username value:",this.username.value);
    }
    render(){
        return (
            <form className="form" ref={(form:any)=>{this.form = form}}>
                <FormGroup>
                    <Label>Sign In</Label>
                    <Input type="text" name="username" ref={(username:any)=>{this.username = username}} id="username" placeholder="enter your username"/>
                    <Input type="password" name="password" ref={(password:any)=>{this.password = password}} id="password" placeholder="enter your password"/>
                    <Button color="primary" onClick={this.OnLogin.bind(this)}>{"Login"}</Button>{' '}
                </FormGroup>
            </form>
        )
    }
}

此处，当我输入用户名artgb并点击Login按钮时，OnLogin功能会打印此行

  

username： Object {props：Object，context：Object，refs：Object，updater：   Object，_reactInternalFiber：Object，_reactInternalInstance：Object，   state：null}

     

用户名值：未定义

我认为用户名值应为artgb而不是undefined。

事实上，我刚刚开始打字，可能会遗漏一些基本的东西 任何建议都会受到赞赏。

Answer 1

ref返回的值是反应组件。所以不是DOM元素，您需要使用{{1}}。 这将返回DOM元素，您可以在其上访问value属性。

但正如Joe Clay所说，你不需要裁判。使用他提供的链接中描述的事件。

Answer 2

我找到了简单的解决方案。

{"category_id"=>"514d2280e8",
 "list_id"=>"7753bdb3c1",
 "id"=>"fd766fdh5c",
 "name"=>"Single Group",