Question

我正在使用react设置一个简单的注册表单，并使用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

输入字段是反应工具箱组件

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'}

例如密码应该是这样的

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

React onChange事件不会返回对象

1 个答案: