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} />