ReactJs undefined is not a function
I am trying to make a dynamic form with reac and have to submit this form using an ajax function, I have this:
_change:function _change(data){
console.log(data);
},
render:function() {
var conjunto = [];
var element = JSON.parse(this.props.elements);
return (
<div className="formNew">
{Object.keys(elementos).map(function(key, index) {
return <FormElement key={index} change={this._change} nombre={key} meta={element[key]}></FormElement>
}, elementos)}
<input type="submit" value="Submit" />
</div>
);
} ,
The problem is that I have prop support for the callback, but the script tell me the _change function is undefined, if I do it, it works:
return (
<div className="formularioAlta">
{Object.keys(elementos).map(function(key, index) {
return <FormElement key={index} cambia={function(data){console.log(data)}} nombre={key} meta={elementos[key]}></FormElement>
}, elementos)}
<input type="submit" value="Submit" />
</div>
);
How can I use the _change function for the callback and make sure this set
You can see the complete script here:
var FormElement=React.createClass({
getInitialState: function getInitialState() {
return { errorText: '', inputValue: '' };
},
propTypes: {
change: React.PropTypes.func
},
componentDidMount: function() {
},
toggle:function() {
this.refs.leftNav.toggle();
},
_handleValidateText: function _handleValidateText() {
this.props.change(event.target.value);
this.setState({inputValue: event.target.value,errorText:''});
},
_handleValidateNumber: function _handleValidateNumber(event) {
if(!isNaN(parseFloat(event.target.value)) && isFinite(event.target.value)){
this.setState({inputValue: event.target.value,errorText:''});
}else{
this.setState({errorText:'Error'});
}
this.props.change(event.target.value);
},
_handleKeyPress: function _handleKeyPress(n,event) {
this.setState({inputValue: event,errorText:''});
},
render:function() {
if(this.props.meta.tipo==3){
var element = <mui.TextField
className={this.props.nombre}
hintText=""
errorText={this.state.errorText}
value={this.state.inputValue}
onChange={this._handleValidateText}
floatingLabelText={this.props.meta.verbose_name}>
</mui.TextField>
}else if(this.props.meta.tipo==16){
var element = <mui.TextField
className={this.props.nombre}
hintText=""
value={this.state.inputValue}
errorText={this.state.errorText}
onChange={this._handleValidateNumber}
floatingLabelText={this.props.meta.verbose_name}>
</mui.TextField>
}else if(this.props.meta.tipo==26){
var element = <mui.DatePicker
autoOk={true}
hintText={this.props.meta.verbose_name}
onChange={this._handleKeyPress}>
</mui.DatePicker>
}
return (
<div>
{element}
</div>
);
}
});
var CreaForm=React.createClass({
mixins:[mui.YBExt.claseBaseTheme.themeMixin],
getInitialState: function getInitialState() {
var elementos = JSON.parse(this.props.elementos);
var objElement = {};
var change = function _change(data){
console.log(data);
}
Object.keys(elementos).forEach(function(key, index) {
objElement[key]=""
}, elementos);
return { elementos: objElement };
},
componentDidMount: function() {
},
toggle:function() {
this.refs.leftNav.toggle();
},
_handleSubmit:function _handleSubmit(data){
event.preventDefault();
console.log(this.state.elementos);
},
_handleFormChange:function _handleFormChange(data){
this.state.elementos[data.target.name]=data.target.value;
this.setState({elementos:this.state.elementos});
},
_change:function _change(data){
console.log(data);
},
render:function() {
var conjunto = [];
var elementos = JSON.parse(this.props.elementos);
Object.keys(elementos).forEach(function(key, index) {
conjunto.push(
<FormElement key={index} change={function(data){console.log(data)}} nombre={key} meta={elementos[key]}></FormElement>
);
}, elementos);
return (
<div className="formularioAlta">
{conjunto}
<input type="submit" value="Submit" />
</div>
);
} ,
});
+3
source to share
2 answers
you must define the _onchange function in FormElement
.
var FormElement = React.createClass({
_change:function(data){
console.log(data);
},
render: function(){
return(
/*
Your code
*/
);
}
});
because it this
refers to FormElement
(child). You created this function in your parent class.
0
source to share
If I do this, don't work:
render:function() {
var conjunto = [];
var elementos = JSON.parse(this.props.elementos);
Object.keys(elementos).forEach(function(key, index) {
conjunto.push(
<FormElement key={index} cambia={this.cambia} nombre={key} meta={elementos[key]}></FormElement>
);
}, elementos);
return (
<div className="formularioAlta">
{conjunto}
<input type="submit" value="Submit" />
</div>
);
} ,
But if I only have one, or multiple formElements work fine, but I need a display function to display all the elements:
render:function() {
var elementos = JSON.parse(this.props.elementos);
return (
<div className="formularioAlta">
<FormElement key={index} cambia={this.cambia} nombre={key} meta={elementos[key]}></FormElement>
<input type="submit" value="Submit" />
</div>
);
} ,
0
source to share