<分区>
我是 React
的新手,目前正在学习如何制作约会风格的网络应用程序,但有一个错误我不太明白如何修复。
错误是:
Uncaught TypeError: Cannot read property 'onUserInput' of undefined
相关代码是作为父组件的 appointments comp 和作为子组件的 appointment_form comp。
当 AppointmentForm
试图从其 handleChange
方法调用 onUserInput
时,会发生错误。对我来说,这个错误听起来像是我没有正确调用该方法,但我还没有找到修复它的方法。任何帮助将不胜感激,谢谢
class Appointments extends React.Component {
constructor(props)
{
super(props);
this.state = {
appointments: this.props.appointments,
input_title: "Team Startup Meeting",
input_apt_time: 'Tomorrow at 9am'
};
}
handleUserInput(obj)
{
this.setState(obj);
}
handleFormSubmit()
{
var appointment = {title: this.state.title,
apt_time: this.state.apt_time}
$.post('/appointments',
{appointment: appointment});
}
render()
{
return (
<div>
<AppointmentForm input_title={this.state.input_title}
input_apt_time={this.state.input_apt_time}
onUserInput={this.handleUserInput} />
<AppointmentsList appointments={this.props.appointments}
onFormSubmit={this.handleFormSubmit}/>
</div>
);
}
}
class AppointmentForm extends React.Component {
handleChange(e)
{
var name = e.target.name;
obj = new Object();
obj.name = e.target.value;
this.props.onUserInput(obj);
}
handleSubmit(e)
{
e.preventDefault();
this.props.onFormSubmit();
}
render()
{
return (
<div>
<h2>Make an Appointment</h2>
<form onSubmit={this.handleSubmit.bind(this)}>
<input name="title" placeholder="Appointment Title"
value={this.props.input_title}
onChange={this.handleChange}/>
<input name="apt_time" placeholder="Date and Time"
value={this.props.input_apt_time}
onChange={this.handleChange} />
<input type="submit" value="Make Appointment" />
</form>
</div>
)
}
}