javascript - 我究竟做错了什么？ TypeError:这是未定义的

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


  这是未定义的


尝试更改状态时。

我写了一个名字：“ hello”，只是将状态更改为可视化的形式（如果可以）。与“ 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>


    )
}

我希望这样做：

this.setState({
          error : null ,
          posts: [] ,
          isLoaded:false,
          name:'Hello',
          description: 'TryDescription',
      })

名称采用“ Hello”字符串值，但不包含任何值。

最佳答案

您需要将this绑定到handleInputchange函数，

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

您的代码的另一个问题是，

<form onSubmit={Posts.handleSubmit}>

不要编写此类事件，您只需要这样做，

<form onSubmit={this.handleSubmit}>

而您的handleSubmit函数应仅此而已，

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

同样，您需要将this绑定到handleSubmit函数，

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',
  })
};

在这种情况下，您无需将this绑定到您的函数。