Javascript 我做错了什么？TypeError：这是未定义的

我正在创建一个简单的表单，其中包含一个React组件，通过axios.post发送，因此我试图捕获输入数据，但由于某种原因，我得到了一个

这是未定义的

当试图改变状态时

我写了一个名字：'你好'，只要把状态改成某种形式的可视化，如果它在工作的话。与“TryDescription”相同

export default class Posts extends Component {
    constructor(props){
        super(props);
        this.state = {
            error: null ,
            posts: [],
            isLoaded: false,
            name : null,
            description: null,
        }
    }
    static handleSubmit(event){
        event.preventDefault();
        console.log('hello');
    };
   handleInputchange(event){
       console.log(event.target.value);
      this.setState({
          error : null ,
          posts: [] ,
          isLoaded:false,
          name:'Hello',
          description: 'TryDescription',
      })


   };

    render() {
        const { error, isLoaded, posts , name , description } = this.state;
    return (

        <div className="container">
            <form onSubmit={Posts.handleSubmit}>
                <div className="form-row">
                    <div className="form-group col-md-6">
                        <label htmlFor="name">Name</label>
                        <p>The name is:{name}  </p>
                        <input onChange={this.handleInputchange} type="text" name='name' className="form-control" id="name" placeholder="Tittle"/>
                    </div>
                    <div className="form-group col-md-6">
                        <label htmlFor="description">Description</label>
                        <p>The description is:{description}  </p>
                        <input onChange={this.handleInputchange}  name="description" type="text" className="form-control" id="description" placeholder="Description"/>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary">Create</button>
            </form>

            <div className="row">
                {posts.map((post) =>
                    <div className="col-3" key={post.id} >
                    <div className="card"  style={{width: 18 + 'rem'}}>
                        <div className="card-body">
                            <h5 className="card-title">{post.name}</h5>
                            <h6 className="card-subtitle mb-2 text-muted">Subtítulo</h6>
                            <p className="card-text">{post.description}</p>
                            <a href="#" className="card-link">Card link</a>
                            <a href="#" className="card-link">Another link</a>
                        </div>
                    </div>
                    </div>
                )}
            </div>

        </div>


    )
}

---

name接受“Hello”字符串值，但不接受任何内容。

您需要将

此

绑定到

handleInputchange

函数

this.handleInputchange = this.handleInputchange.bind(this); //Add this in your constructor

this.handleSubmit = this.handleSubmit.bind(this); //Add this in your constructor

代码的另一个问题是

<form onSubmit={Posts.handleSubmit}>

同样，您需要将

此

绑定到

handleSubmit

函数

this.handleInputchange = this.handleInputchange.bind(this); //Add this in your constructor

this.handleSubmit = this.handleSubmit.bind(this); //Add this in your constructor

或者，另一种方法是使用箭头函数表示法声明函数

handleSubmit = (event) => {
   event.preventDefault();
   console.log('hello');
};


handleInputchange = (event) => {
  console.log(event.target.value);
  this.setState({
     error : null ,
     posts: [] ,
     isLoaded:false,
     name:'Hello',
     description: 'TryDescription',
  })
};

---

在这种情况下，您不需要将

此

绑定到您的函数。

您应该在

构造函数中绑定
handleInputchange
函数

constructor(props){
    super(props);
    this.state = {
        error: null ,
        posts: [],
        isLoaded: false,
        name : null,
        description: null,
    }
    this.handleInputchange = this.handleInputchange.bind(this)
}

约束国家可以解决这个问题。记住，您必须在构造函数中进行绑定。可以使用“.bind（this）”进行修改，如下所示

 this.handleInputchange = this.handleInputchange.bind(this);

最后，您的构造函数应该如下所示：

  constructor(props){
    super(props);
    this.state = {
        error: null ,
        posts: [],
        isLoaded: false,
        name : null,
        description: null,
    }

    this.handleInputchange = this.handleInputchange.bind(this);
}

您可以在此处使用箭头功能。这将帮助您修复错误。大概是这样的：

   handleInputchange = (event) => {
        // write logic
   }

祝你好运

   handleInputchange = (event) => {
        // write logic
   }