Question

我正在创建一个带有React组件以通过func fetchToken() -> AnyPublisher<String, Error> { let request = ... return URLSession.shared .dataTaskPublisher(for: request) .map { $0.data } .decode(type: ResponseObject.self, decoder: JSONDecoder()) .map { $0.payload.token } .eraseToAnyPublisher() }发送的简单表单，因此我试图捕获输入数据，但是由于某种原因，我得到了

这是未定义的

在尝试更改状态时。

我写了一个名字：“ hello”，只是将状态更改为可视化的形式（如果可以）。与“ TryDescription”相同。

axios.post

我希望这样做：

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'字符串值，但不包含任何值。

Answer 1

您需要将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绑定到您的函数上。

Answer 2

您应该在handleInputchange中绑定contructor函数

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

Answer 3

约束国家将解决此问题。请记住，您必须在构造函数中进行绑定。可以使用“ .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);
}

Answer 4

您可以在此处使用箭头功能。这将帮助您解决错误。像这样的东西：

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

祝你好运。

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

4 个答案: