React onChange事件不會返回對象

Question

我正在設置一個簡單的註冊表單，並使用onChange處理程序更新狀態。由onChange處理程序捕獲的事件參數是一個字符串，而不是一個對象。

所以，我是無法訪問event.target.value或事件event.target 事件只是得到我輸入的關鍵字

這是相關片段。

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 

輸入字段是反應-Toolbox零部件

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; 

Answer 1

按照react-toolbox documentation,

您handleChange應該是這樣的

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

和你的onChange

onChange={this.handleChange.bind(this,'fieldName'} 

e.g密碼就應該是這樣的

<Input onChange={this.handleChange.bind(this,'password'} type="password" label="password" value={this.state.password} placeHolder="password" name="password" value={this.state.password}/>