Значение этого не определено - PullRequest
Новая
       10

Значение этого не определено

0 голосов
/ 20 сентября 2019

У меня есть значение this внутри оператора if, вложенного в функцию my 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

Ответы [ 2 ]

3 голосов
/ 20 сентября 2019

Первый шаг в изучении того, как делать то, что вы хотите, - это изучить, как работает Состояние React ( официальные документы отлично объясняют это).

Этопример не завершен, но должен помочь вам пройти процесс. 

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, но я рекомендую вам изучить методы жизненного цикла не понаслышке. Удачи!)

0 голосов
/ 20 сентября 2019

Я решил написать, даже если вы предложили правильный ответ по той простой причине, что я думаю, что мой код ближе к тому, что он опубликовал. 

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);

Живой пример:

Edit patient-bush-27cp5

...