未定义的TypeError:无法读取未定义的属性“值”
提问于 2016-12-08 22:53:27
我正在创建一个登录表单，使用REACT作为前端，使用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:无法读取未定义的属性值
我用的是反应工具箱。因此，我使用来自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的组件。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-12-08 23:22:06
首先，什么是<Input ..../> and <Button .../>？它们是您的组件还是仅是表单输入字段？
我假设它们只是表单字段，因此它们需要在小写的<input ..../> , <button .../>中。
尝试在呈现中绑定您的函数，比如：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'));更新
我测试了它，这里：
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函数，因此，您可以获得作为第二个参数的值。你不需要参加活动。
Stack Overflow用户
发布于 2016-12-08 23:08:05
首先将构造函数中的this.state更改为单this.state = {emai:'',password:''}，然后在构造函数中尝试将handleEmailChange和handlePasswordChange绑定到输入中，您需要将this直接设置为输入，
更新
如果Input和Button是组件，则需要在它们中实现changeMethod和onChange事件，并通过回调将值发送回组件Login。
IT如何工作-
class Input extends React.Component{
constructor(props){
super(props);
this.state= {
value : this.props.value
}
}
componentWillReceiveProps(nextProps){
this.setState({
value: nextProps.value,
})
}
render(){
return(
<input onChange={this.handleChangeValue.bind(this)} type="text" name={this.props.name} value={this.state.value} placeholder={this.props.placeholder} className={**just class name or send via props too**} />
)
}
handleChangeValue(e){
this.setState({value:e.target.value});
this.props.changeValue(e.target.value);
}
}
class Login extends React.Component{
constructor(props){
super(props);
this.state= {
emailValue : '',
passwordValue: '',
...
}
}
render(){
return(
<div>
<Input type="text" name='email' value={this.state.emailValue} placeholder={'Write email'} className='someName' changeValue={this.changeEmailValue.bind(this)} />
<Input type="text" name='password' value={this.state.passwordValue} placeholder={'Write password'} className='someName' changeValue={this.changePasswordValue.bind(this)} />
</div>
)
}
changeEmailValue(value){
this.setState({emailValue:value});
}
changePasswordValue(value){
this.setState({passwordValue:value});
}
}Stack Overflow用户
发布于 2016-12-08 23:18:43
由于您使用的是自定义组件<Input/>，所以不管组件有什么特殊代码，都很可能是抽象出从内置组件<input/>中传递的默认事件。(请注意小写字母"i")，所以您可能需要阅读：
handleEmailChange(value) {
this.setState({email: value});
}
handlePasswordChange(value) {
this.setState({password: value});
}无论如何，修复很可能是onChange没有返回一个事件，而是一些您没有预料到的其他值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41054679
复制相关文章
腾讯云开发者
