this.props не функция - PullRequest
Новая
       11

this.props не функция

2 голосов
/ 04 апреля 2020

Я понимаю три исправления (привязка, метод функции стрелки, функция стрелки для обратного вызова) для этой ошибки, но я все еще получаю ошибку после использования функции стрелки в методе. Ошибка: _this.props.onSubmit не является функцией "Пожалуйста, см. Ниже. Спасибо. 

import React from 'react';
import ReactDOM from 'react-dom'

var clickstyle = {
  color: "black",
  fontSize: 28,
  margin: 15,
}

class Click extends React.Component {
  state = { term: 'Say Something!' };

  onFormSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit(this.state.term);
  }
  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label style={clickstyle}> Say It!</label>
            <input
              type="text"
              value={this.state.term}
              onChange={(e) =>
                this.setState({ term: e.target.value.toUpperCase() })}
            />
          </div>
        </form>
      </div>
    )
  }
}

export default Click;

1 Ответ

1 голос
/ 04 апреля 2020

Здесь вы go с решением

Вам необходимо определить PropType как func в Click компонент 

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

var clickstyle = {
  color: "black",
  fontSize: 28,
  margin: 15,
}

class Click extends React.Component {
  state = { term: 'Say Something!' };

  onFormSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit(this.state.term);
  }
  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label style={clickstyle}> Say It!</label>
            <input
              type="text"
              value={this.state.term}
              onChange={(e) =>
                this.setState({ term: e.target.value.toUpperCase() })}
            />
          </div>
        </form>
      </div>
    )
  }
}

Click.propTypes = {
  onSubmit: PropTypes.func
};

export default Click;

Click.jsx Вам необходимо прикрепить метод для поддержки метода обработки. 

handleSubmit = data => {
  window.console.log(data);
}

<Click onSubmit={this.handleSubmit} />
...