javascript - React 组件无法读取未定义的属性

标签 javascript reactjs

<分区>

我是 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>
        )
    }
}

最佳答案

您应该将组件实例绑定(bind)到组件构造函数内的handleChange 方法的this:

class AppointmentForm extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    ..........
}

关于javascript - React 组件无法读取未定义的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50847533/

相关文章:

javascript - 将 <p>paragraph</p> 添加到 div 中,但如果该 div 已有 2 个段落,则创建一个新 div

javascript - 构建失败,因为 webpack 错误

javascript - 手动调用 React.PropTypes 验证函数 React-Materialize

javascript - React Router,超出最大调用堆栈大小

javascript - 如何在特定 ID 上触发 onclick CSS

javascript - v8 Atomics.wait timeout 为什么误差这么大?

javascript - 为什么我在 <span> 元素后换行

javascript - CKEditor 中对话框的源代码在哪里?

javascript - 不能在 React Native 中只调用一次函数?

javascript - 如何在 react 组件中添加滚动事件