Question

以下代码

import React, { Component } from 'react';

class AddNinja extends Component {
  state = {
    name: null,
    age: null,
    belt: null
  }
  handleChange = (e) => {
    this.setState({[e.target.id]: e.taget.value});
  }
  handleSubmit = (e) => {
    e.preventDefault();  
    console.log(this.state);
  }
  render() {
    return (
      <div>        
        <form onSubmit={this.handleSubmit}> 
          <label htmlFor='name'>Name: </label>
          <input type='text' id='name' onChange={this.handleChange} />
          <label htmlFor='age'>Age: </label>
          <input type='text' id='age' onChange={this.handleChange} />
          <label htmlFor='belt'>Belt: </label>
          <input type='text' id='belt' onChange={this.handleChange} />
          <button>Submit</button>
        </form>
      </div>
    )
  }
}

export default AddNinja;

将触发以下错误；

TypeError: Cannot read property 'value' of undefined
AddNinja._this.handleChange
src/AddNinja.jsx:10
   7 |   belt: null
   8 | }
   9 | handleChange = (e) => {
> 10 |   this.setState({[e.target.id]: e.taget.value});
  11 | }
  12 | handleSubmit = (e) => {
  13 |   e.preventDefault();

当我明确使用三个已定义键中的任何一个时，它将起作用，即：

this.setState({name: e.taget.value});

蚂蚁知道发生了什么事？根据以下link，它应该可以工作

Answer 1

您拼写了target，并改用taget。试试这个：

this.setState({[e.target.id]: e.target.value});

当使用一个onChange处理程序使用不同的输入时，setState“ TypeError：无法读取未定义的属性'值'

1 个答案: