ReactJs undefined is not a function

Question

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

jquery ajax reactjs forms

Juan manuel 06 Aug '15 at 11:00

source to share

2 answers

Vishnu · Answer 1 · 2015-08-06T11:37:43+0000

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.

Juan manuel · Answer 2 · 2015-08-06T12:13:25+0000

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>                        
        );
    } ,

ReactJs undefined is not a function

More articles: