ReactJs undefined 不是函数

Posted 2023-05-09

【中文标题】ReactJs undefined 不是函数

【英文标题】：ReactJs undefined is not a function

【发布时间】：2015-10-29 11:59:26

【问题描述】：

我正在尝试使用 reac 制作动态表单，并且需要使用 ajax 函数提交此表单，我已经有了这个：

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

问题是我有回调的 change 属性，但脚本告诉我 _change 函数未定义，如果我这样做，它可以工作：

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

我如何使用 _change 函数进行回调并确保此设置

在这里你可以看到完整的脚本：

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


);

【参考方案1】：

你应该在FormElement中定义_onchange函数。

var FormElement  = React.createClass(
     _change:function(data)
          console.log(data);
     ,
     render: function()
        return(
           /*
                    Your code
           */
        );
     
);

因为this 指的是FormElement(child)。您已经在父类中编写了该函数。

【讨论】：

我需要父原因上的 onchange 函数，因为谁需要数据。

@JuanManuel 所做的是正确的，他只是使用错误的语法来定义函数；）检查我的答案

@JuanManuel ***.com/questions/31435467/…

【参考方案2】：

如果我这样做不起作用：

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

但如果我只有一个或几个 formElements 可以正常工作，但我需要 map 函数来显示所有元素：

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