ReactJs undefined 不是函数答案

【问题标题】：ReactJs undefined is not a functionReactJs undefined 不是函数
【发布时间】：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>                        
        );
    } ,   


});

【问题讨论】：

标签： jquery ajax forms reactjs

【解决方案1】：

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

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

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

【讨论】：

我需要父原因上的 onchange 函数，因为谁需要数据。
@JuanManuel 所做的是正确的，他只是使用错误的语法来定义函数；）检查我的答案
@JuanManuel stackoverflow.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>                        
        );
    } ,

【讨论】：