Rails-React - Uncaught TypeError: _this.props.handleNewCategory is not a function

Potrzebna pomoc
1

Heja, przerabiam ten tutorial ReactJs, ale co jakiś czas mam błędy. Na chwilę obecną mam problem z takim o to błędem:
Uncaught TypeError: _this.props.handleNewCategory is not a function

Nie rozumiem, dlaczego funkcja handleNewCategory, nie została odnaleziona. Poniżej przedstawiam kod, który nastrugałem:

datagrid.js.coffee

@DataGrid = React.createClass
	getInitialState: ->
		records: @props.data
		title: @props.title		

	getDefaultProps: ->
		records: []

	deleteRecord: (record) ->
		records = @state.records.slice()
		index	= records.indexOf(record)

		records.splice(index, 1)
		console.log(records)
		@replaceState records: records, title: @props.title

	render: ->
		React.DOM.div
			className: 'panel panel-info'
			React.DOM.div
				className: 'panel-heading'
				@state.title
			React.DOM.table
				className: 'table'
				React.DOM.thead null,
					React.DOM.tr null,
						React.DOM.th null, 'Name'
						React.DOM.th null, 'Articles'
						React.DOM.th null, 'Active'	
						React.DOM.th null, ''					
				React.DOM.tbody null,
					for record in @state.records
						React.createElement Category, key: record.id, record: record, handleDeleteRecord: @deleteRecord

category.js.coffee

@Category = React.createClass
	createCategory	: (record) ->
		records = @state.records.slice()
		records.push record
		@setState records: records

	handleDelete 	: (e) ->
		e.preventDefault()
		
		$.ajax
			method: 'DELETE'
			url: "/admin/categories/#{ @props.record.id }"
			dataType: 'JSON'
			success: () =>
				@props.handleDeleteRecord @props.record

	render			: ->
		React.createElement CategoryForm, handleNewCategory	: @createCategory

		React.DOM.hr

		React.DOM.tr null,
			React.DOM.td null, @props.record.name
			React.DOM.td null,
				React.DOM.span
					className: 'badge'
					@props.record.articles.length
			React.DOM.td null, @props.record.active
			React.DOM.td null,
				React.DOM.a
					className: 'btn btn-primary'
					href: "/admin/categories/#{ @props.record.id }/edit"
					React.DOM.span
						className: 'glyphicon glyphicon-pencil'
					' Edit'

				React.DOM.a
					className: 'btn btn-danger'
					onClick: @handleDelete
					React.DOM.span
						className: 'glyphicon glyphicon-trash'
					' Delete'

category_form.js.coffee

@CategoryForm = React.createClass
	getInitialState	: ->
		name: ''

	handleChange	: (e) ->
		name = e.target.name
		@setState "#{ name }" : e.target.value

	handleSubmit	: (e) ->
		e.preventDefault()

		$.post '', { category: @state }, (data) =>
			@props.handleNewCategory data
			@setState @getInitialState()
			'JSON'

	valid			: ->
		@state.name.length > 0

	render			: ->
		React.DOM.form
			className	: 'form-inline'
			onSubmit	: @handleSubmit
			React.DOM.div
				className: 'form-group'
				React.DOM.input
					className	: 'form-control'
					placeholder : 'Category name'
					type		: 'text'
					name 		: 'name'
					value		: @state.name
					onChange	: @handleChange
			React.DOM.button
				className	: 'btn btn-primary'
				type		: 'submit'
				disabled	: !@valid()
				'Create'

Z góry dziękuję za pomoc :wink:

2

to nie to forum ale z tego co widzę to odwołujesz sie do nie tego “this” wywołując @props.handle… ,użyj bind

3

Faktycznie trochę zamieszałem, poniżej przeniosłem funkcję dodawania nowego rekordu do głównego pliku i tam tworzę element formularza. Jednak to mi nie rozwiązało problemu, nadal posiadam ten sam błąd:

datagrid.js.coffee

@DataGrid = React.createClass
	getInitialState : ->
		records: @props.data
		title: @props.title		

	getDefaultProps : ->
		records: []

	addRecord		: (record) ->
		records = @state.records.slice()
		records.push record
		@setState records: records

	deleteRecord 	: (record) ->
		records = @state.records.slice()
		index	= records.indexOf(record)

		records.splice(index, 1)
		@replaceState records: records, title: @props.title

	render 			: ->
		React.createElement CategoryForm, handleNewRecord: @addRecord

		React.DOM.hr

		React.DOM.div
			className: 'panel panel-info'
			React.DOM.div
				className: 'panel-heading'
				@state.title
			React.DOM.table
				className: 'table'
				React.DOM.thead null,
					React.DOM.tr null,
						React.DOM.th null, 'Name'
						React.DOM.th null, 'Articles'
						React.DOM.th null, 'Active'	
						React.DOM.th null, ''					
				React.DOM.tbody null,
					for record in @state.records
						React.createElement Category, key: record.id, record: record, handleDeleteRecord: @deleteRecord

category_form.js.coffee

@CategoryForm = React.createClass
	getInitialState	: ->
		name: ''

	handleChange	: (e) ->
		name = e.target.name
		@setState "#{ name }" : e.target.value

	handleSubmit	: (e) ->
		e.preventDefault()
		
		$.ajax
			method: 'POST'
			url: '/admin/categories'
			dataType: 'JSON'
			data: { category: @state }
			success: (data) =>
				@props.handleNewRecord data
				@setState @getInitialState()

	valid			: ->
		@state.name.length > 0

	render			: ->
		React.DOM.form
			className	: 'form-inline'
			onSubmit	: @handleSubmit
			React.DOM.div
				className: 'form-group'
				React.DOM.input
					className	: 'form-control'
					placeholder : 'Category name'
					type		: 'text'
					name 		: 'name'
					value		: @state.name
					onChange	: @handleChange
			React.DOM.button
				className	: 'btn btn-primary'
				type		: 'submit'
				disabled	: !@valid()
				'Create'