React-Rails this.setState не является функцией

Question

Привет, я работаю над своим проектом на Rails, используя React.

У меня есть два состояния, над которыми я работаю, чтобы обрабатывать пользовательский ввод.

Вот мой 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} />