Question

我正在创建一个使用REACT JS作为前端而PHP作为后端的登录表单。我想获取输入值。代码如下：

import React, { Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, IconButton} from 'react-toolbox/lib/button';
import Input from 'react-toolbox/lib/input';

export default class Login extends React.Component {

constructor() {
    super();
    this.state = {email: ''};
    this.state = {password: ''};
    this.onSubmit = this.onSubmit.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
}
handleEmailChange(e) {
    this.setState({email: e.target.value});
}
handlePasswordChange(e) {
    this.setState({password: e.target.value});
}
onSubmit() {
    fetch('http://xyz/check-login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
      })
    })
}

表格如下：

<form name="Login">
<Input type="text" name="email" value={this.state.email} placeholder="Email Id" className="form-control" onChange={this.handleEmailChange} />
<Input name="password" value={this.state.password} placeholder="Password" type="password" className="form-control m-b-10" onChange={this.handlePasswordChange} />   
<Button type="button" className="m-t-20 orange" label="Sign in " onClick={this.onSubmit} /> 
</form>

但是收到以下错误：

未捕获的TypeError：无法读取未定义的属性“值”

我正在使用react-toolbox。所以，我使用https://github.com/react-toolbox/react-toolbox/blob/dev/components/input/Input.js中的组件和https://github.com/react-toolbox/react-toolbox/blob/dev/components/button/Button.js中的组件。

Answer 1

首先，<Input ..../> and <Button .../>是什么？它们是您的组件还是仅仅是表单输入字段？

我认为它们只是表单字段，因此它们必须是小写<input ..../> , <button .../>。

尝试将您的函数绑定到render中，例如：this.functionName.bind(this)。

这是一个有效的代码：

class Test extends React.Component {
    constructor(props){
        super(props);

      this.state = {
          email: '',
          password: '',
      };
    }

    handleEmailChange(e) {
        this.setState({email: e.target.value});
    }
    handlePasswordChange(e) {
        this.setState({password: e.target.value});
    }


    render(){
        return (
        <div>
            <form name="Login">
              <input type="text" name="email" value={this.state.email} placeholder="Email Id" className="form-control" onChange={this.handleEmailChange.bind(this)} />
              <input name="password" value={this.state.password} placeholder="Password" type="password" className="form-control m-b-10" onChange={this.handlePasswordChange.bind(this)} />   
              <button type="button" className="m-t-20 orange" label="Sign in " onClick={this.onSubmit}>Sign in</button> 
          </form>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Here is the fiddle.

<强>更新

我测试了它here：

 constructor(props){
    super(props);

    this.state = {
            name: '',
        email: ''
    }
  }

  handleChange(name, value){
    let state = this.state;
    state[name] = value;
    this.setState({state});

  }

  render () {
    return (
      <section>
        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
      </section>
    );
  }

我不确定它是如何工作的，但它将名称和值作为参数传递给handleChange函数，因此，您可以将值作为第二个参数。你不需要活动。

Answer 2

首先将构造函数中的this.state更改为单个 - this.state = {emai:'',password:''}，然后尝试在输入中绑定handleEmailChange和handlePasswordChange而不是构造函数，您需要设置{{ 1}}直接输入，

<强>更新

或如果this和Input是组件，则需要在其中实现changeMethod和onChange事件，并通过回调将值发送回组件Button

如何工作 -

Login

Answer 3

而不是在构造函数中绑定事件将其与输入字段绑定，它将解决您的问题。还有一个建议：你使用两个状态对象，不要使用两个独立的状态变量初始化，定义如下：

this.state = {
    email: '',
    password: '',
};

Answer 4

由于您使用的是自定义组件<Input/>，因此组件所具有的任何特殊代码都可能抽象出从内置组件<input/>传递的默认事件。（注意小写“i”）所以也许你需要它阅读：

handleEmailChange(value) {
    this.setState({email: value});
}
handlePasswordChange(value) {
    this.setState({password: value});
}

无论修复可能是onChange没有返回事件，而是你没想到的其他一些值。

未捕获的TypeError：无法在REACT JS中读取未定义的属性“value”

4 个答案: