Reactstrap 表单输入 innerRef 返回 null

Question

正在尝试将输入数据发送到 console.log，但它似乎无法正常工作。我希望能够从 auth 登录到控制台电子邮件和密码。

这是我的构造函数和 onChange:

  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      errors: {}
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  }

这是我的 onSubmit：

onSubmit = e => {
    e.preventDefault()

    const userData = {
      email: this.state.email,
      password: this.state.password
    };

    console.log(userData);
  }

这是我从表单输入的内容：

<Input
  name="email"
  type="email"
  onChange={this.onChange}
  innerRef={this.state.email}
  error={errors.email}
/>

没有收到任何错误，只是电子邮件和密码返回为空。

Answer 1

您必须将 onChange 函数更改为：

onChange = e => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

我认为这必须解决你的问题

Reactstrap 表单输入 innerRef 返回 null

Reactstrap Form Input innerRef coming back null

javascript

reactjs

reactstrap