反应onChange事件不返回对象 [英] React onChange event doesnt return object
本文介绍了反应onChange事件不返回对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用react设置一个简单的注册表单,并使用onChange处理程序来更新状态.被onChange处理函数捕获的事件参数是一个字符串,而不是一个对象.
i'm setting up a simple signup form with react and using an onChange handler to update state. the event argument caught by the onChange handler is a string and not an object .
因此,我无法访问event.target.value
或事件event.target
事件只会产生我输入的关键字
therefore i'm unable to access event.target.value
or event event.target
event simply yields my typed keywords
这是相关的代码段.
class SignUp extends Component{
constructor(props){
super(props);
this.state = {
username:'',
password:''
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event){
this.setState({...this.state,[event.target.name]:event.target.value})
}
render(){
const signUp = this.props.signUp;
return(
<form>
<Card className={style.SignUpCard}>
<CardTitle
title="Sign Up"
/>
<CardActions>
<Input type="text" label="username" value={this.state.username} placeHolder="Pick a username" maxLength={16} onChange={this.handleChange} name="username" value={this.state.username}/>
</CardActions>
<CardActions>
<Input type="password" label="password" value={this.state.password} placeHolder="password" onChange={this.handleChange} name="password" value={this.state.password}/>
</CardActions>
<CardActions>
<Button label="Sign Up" raised primary onClick={() => signUp(this.state.username,this.state.password)}/>
</CardActions>
</Card>
</form>
)
}
}
export default SignUp;
我在控制台中的错误
Uncaught TypeError: Cannot read property 'name' of undefined
输入字段是react-toolbox组件
the Input field is a react-toolbox component
class Input extends React.Component {
static propTypes = {
children: React.PropTypes.any,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
error: React.PropTypes.string,
floating: React.PropTypes.bool,
hint: React.PropTypes.string,
icon: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
label: React.PropTypes.string,
maxLength: React.PropTypes.number,
multiline: React.PropTypes.bool,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onFocus: React.PropTypes.func,
onKeyPress: React.PropTypes.func,
required: React.PropTypes.bool,
type: React.PropTypes.string,
value: React.PropTypes.any
};
static defaultProps = {
className: '',
hint: '',
disabled: false,
floating: true,
multiline: false,
required: false,
type: 'text'
};
handleChange = (event) => {
if (this.props.onChange) this.props.onChange(event.target.value, event);
};
blur () {
this.refs.input.blur();
}
focus () {
this.refs.input.focus();
}
render () {
const { children, disabled, error, floating, hint, icon,
label: labelText, maxLength, multiline, required,
type, value, ...others} = this.props;
const length = maxLength && value ? value.length : 0;
const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
const className = ClassNames(style.root, {
[style.disabled]: disabled,
[style.errored]: error,
[style.hidden]: type === 'hidden',
[style.withIcon]: icon
}, this.props.className);
const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
...others,
className: ClassNames(style.input, {[style.filled]: valuePresent}),
onChange: this.handleChange,
ref: 'input',
role: 'input',
disabled,
required,
type,
value,
maxLength
});
return (
<div data-react-toolbox='input' className={className}>
{InputElement}
{icon ? <FontIcon className={style.icon} value={icon} /> : null}
<span className={style.bar}></span>
{labelText
? <label className={labelClassName}>
{labelText}
{required ? <span className={style.required}> * </span> : null}
</label>
: null}
{hint ? <span className={style.hint}>{hint}</span> : null}
{error ? <span className={style.error}>{error}</span> : null}
{maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
{children}
</div>
);
}
}
export default Input;
推荐答案
根据反应工具箱文档
您的handleChange应该看起来像这样
your handleChange should look like this
handleChange = (name, value) => {
this.setState({...this.state, [name]: value});
};
和您的onChange
and your onChange
onChange={this.handleChange.bind(this,'fieldName'}
例如,输入密码应该是这样
e.g for password it should be like this
<Input onChange={this.handleChange.bind(this,'password'} type="password" label="password" value={this.state.password} placeHolder="password" name="password" value={this.state.password}/>
这篇关于反应onChange事件不返回对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文