React-Rails this.setState不是一个函数

Question

嗨，我正在使用React开发我的Rails项目。

我有两个处理用户输入的状态。

这是我的Appointments.jsx文件：

import React from 'react';
import Appointment from './Appointment';
import AppointmentForm from './AppointmentForm';
import AppointmentsList from './AppointmentsList';

class Appointments extends React.Component {

   constructor(props) {
     super(props)

     this.state = {
       appointments: this.props.appointments,
       input_title: 'Put your event title.',
       appointment_date: 'When would this happen?'
    };

   }

   handleUserInput(obj_value){
    this.setState(obj_value);
  }


   render(){
     return(
      <div>
        <AppointmentForm input_title={this.state.input_title} 
         appointment_date={this.state.appointment_date} 
         onUserInput={this.handleUserInput}
         />
        <AppointmentsList appointments={this.props.appointments} />
     </div>
     )
   }
}

export default Appointments;

下面是我的AppointmentForm.jsx文件：

import React from 'react';

class AppointmentForm extends React.Component{

    handleChange = e => {
        let name = e.target.name;
        const obj_value = {};
        obj_value[name] = e.target.value;
        this.props.onUserInput(obj_value);
    }

    render(){
        return(
            <div>
                <h2>Make a new appointment</h2>
                <form>
                    <input name='title' 
                     value={this.props.input_title} 
                     onChange={this.handleChange} />

                    <input name='appointment_date' 
                    value={this.props.appointment_date} 
                    onChange={this.handleChange} />

                    <input type='submit' value='Make Appointment' />
                </form>
            </div>
        )
    }
}

export default AppointmentForm;

在日期输入字段中输入就可以了。它接受文本，但在标题输入字段中，它根本不会进行编辑，而是抛出以下错误：

Appointments.jsx:20 Uncaught TypeError: this.setState is not a function
    at Object.handleUserInput [as onUserInput] (Appointments.jsx:20)
    at AppointmentForm._this.handleChange (AppointmentForm.jsx:9)
    at HTMLUnknownElement.callCallback (react-dom.development.js:191)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:240)
    at invokeGuardedCallback (react-dom.development.js:293)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:308)
    at executeDispatch (react-dom.development.js:393)
    at executeDispatchesInOrder (react-dom.development.js:418)
    at executeDispatchesAndRelease (react-dom.development.js:3303)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3312)

你知道我错过了什么吗？

Answer 1

Appointment.jsx内部构造函数：

this.handleUserInput = this.handleUserInput.bind(this)

表单中的AppointmentForm.jsx：

<input name='input_title' 
value={this.props.input_title} 
onChange={this.handleChange} />