Question

我试图用反应创建一个动态表单，并且需要使用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函数是未定义的，如果我这样做，它可以工作：

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


});

Answer 1

你应该在var FormElement = React.createClass({ _change:function(data){ console.log(data); }, render: function(){ return( /* Your code */ ); } });中定义_onchange函数。

this

因为FormElement指的是$_SERVER['HTTP_USER_AGENT']（孩子）。您已在父类中编写该函数。

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

ReactJs undefined不是一个函数

2 个答案: