this.ops不是函数

Question

我理解这个错误的三个修复方法(绑定、箭头函数方法、用于回调的箭头函数(，但在方法上使用箭头函数后仍然会出现错误。错误：_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;

Answer 1

这里有一个解决方案

您需要在Click组件中将PropType定义为func

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您需要将一个方法附加到prop以处理方法。

handleSubmit = data => {
window.console.log(data);
}
<Click onSubmit={this.handleSubmit} />