this 的值未定义

Question

我在 if 语句中有一个 this 值，嵌套在我的 handleFormChange 函数中。我尝试使用带有此函数的箭头函数来绑定 this 的值，但我收到以下错误消息：

TypeError: Cannot set property 'author' of undefined

据我了解，通常您可以通过查看包含this 的函数的调用位置来找到this 的值。但是，就我而言，我正在努力解决这个问题。谁能向我解释为什么它是未定义的以及如何解决这个问题？代码如下：

class CommentForm extends React.Component{

    constructor(props){
        super(props)


        var comment={author:'', message:''}
    }


    handleSubmit= (e)=>{
        e.preventDefault()
        var authorVal = this.comment.author;
        var textVal = this.comment.message;
        //this stops any comment submittal if anything missing
        if (!textVal || !authorVal) {
         return;
        }
        this.props.onCommentSubmit(this.comment);
        //reset form values
        e.target[0].value = '';
        e.target[1].value = '';
        return;
    }


    handleFormChange= (e)=>{
        e.preventDefault()
        if(e.target.name==='author'){
            var author = e.target.value.trim();
            this.comment.author = author
        }else if(e.target.name==='message'){
            var message = e.target.value.trim();
            this.comment.message = message
        }
    }

    render() {
    return (

        <form className = "ui form" method="post" onChange={(e)=>{this.handleFormChange(e)}} onSubmit={(e)=>{this.handleSubmit(e)}}>
          <div className="form-group">
            <input
              className="form-control"
              placeholder="user..."
              name="author"
              type="text"
            />
          </div>

          <div className="form-group">
            <textarea
              className="form-control"
              placeholder="comment..."
              name="message"        
            />
          </div>



          <div className="form-group">
            <button disabled={null} className="btn btn-primary">
              Comment &#10148;
            </button>
          </div>
        </form>

    );
  }
}

export default CommentForm

Answer 1

学习如何做你想做的事的第一步是研究 React 的 State 是如何工作的（official docs 擅长解释它）。

这个例子并不完整，但应该指导您完成整个过程。

class CommentForm extends Component {

constructor(props) {
  super(props);

  this.state = {
    author  : '',
    message : '',
  }

  this.onChangeAuthorName = this.onChangeAuthorName.bind(this);
  this.onBlurAuthorName   = this.onBlurAuthorName.bind(this);
}

onChangeAuthorName(e) {
  this.setState({ author: e.target.value });
}

onBlurAuthorName() {
  // trim on blur (or when you send to the network, to avoid
  // having the user not being able to add empty whitespaces
  // while typing
  this.setState({ author: this.state.author.trim() })
}

render() {
  return (
    ...
    <input value={this.state.author} onChange={this.onChangeAuthorName} onBlur={this.onBlurAuthorName} />
    ...
  );
}

}

通常，当您想在 React 中“设置”变量时，您不会像在 Javascript 类 (this.comment = e.target.value) 中那样添加它们，而是使用函数 setState()。来自文档：

// Wrong
this.state.comment = 'Hello';

Instead, use setState():

// Correct
this.setState({comment: 'Hello'});

（注意：或者，这可以使用 React Hooks 完成，但我建议您直接学习生命周期方法。祝你好运！）

Answer 2

即使你提出了正确的答案，我还是决定写下来，原因很简单，我认为我的代码更接近它发布的内容。

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comment: {},
      some: 1
    };
  }

  handleFormChange = e => {
    e.preventDefault();
    let { comment } = this.state;
    const newCommentState = function() {
      let returnObj = { ...comment };
      returnObj[this.target.name] = this.target.value.trim();
      return returnObj;
    }.bind(e)();
    this.setState({ comment: newCommentState });
  };

  handleSubmit = e => {
    e.preventDefault();
    let { comment } = this.state;
    if (!comment.author || !comment.message) return;

    this.props.onCommentSubmit(comment);
    this.setState({ comment: {} });
    e.target[0].value = "";
    e.target[1].value = "";
  };

  render() {
    return (
      <div>
        <form
          className="ui form"
          method="post"
          onChange={e => {
            this.handleFormChange(e);
          }}
          onSubmit={e => {
            this.handleSubmit(e);
          }}
        >
          <div className="form-group">
            <input
              className="form-control"
              placeholder="user..."
              name="author"
              type="text"
            />
          </div>

          <div className="form-group">
            <textarea
              className="form-control"
              placeholder="comment..."
              name="message"
            />
          </div>

          <div className="form-group">
            <button disabled={null} className="btn btn-primary">
              Comment &#10148;
            </button>
          </div>
        </form>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

活生生的例子：