text field getValue from dynamic function error

[munkh-altai]

Thank you for your create UI.

I am trying getValue from dynamic function

const getRefValue = (name) => {
return this.refs[name].getValue();
};

when i call this function i got error ("Uncaught TypeError: _this.refs[name].getValue is not a function")

but if i try this.refs['refName'].getValue() like this fine how to make dynamic function ?

[alitaheri]

@altaihero can you please provide the code that calls this function? it seems like the name is not provided a valid ref string.

[munkh-altai]

thank for reply

this is my code
import React, { Component, PropTypes } from 'react';

//form fields

import TextField from 'material-ui/lib/text-field';
import Checkbox from 'material-ui/lib/checkbox';
import RadioButton from 'material-ui/lib/radio-button';
import RadioButtonGroup from 'material-ui/lib/radio-button-group';
import Toggle from 'material-ui/lib/toggle';

import FlatButton from 'material-ui/lib/flat-button';
import RaisedButton from 'material-ui/lib/raised-button';
import FloatingActionButton from 'material-ui/lib/floating-action-button';

export default class Form extends Component {
saveHandler(){
const getRefValue = (name) => {
return this.refs[name].getValue();
};

    console.log(getRefValue('test'))
}
render() {
    const { formData, saveHandler, changeHandler  } = this.props;

    const formFields = formData.map((field) => {
        if(field.type == '--text')
            return  <div key={field.column}>
                        <TextField
                            name={field.column}
                            ref={field.column}
                            defaultValue={field.value}
                            floatingLabelText={field.title}
                            onChange={changeHandler}
                            hintText={field.title} />
                    </div>
        else if(field.type == '--checkbox')
            return  <div key={field.column}>
                        <Checkbox
                            name={field.column}
                            ref={field.column}

                            defaultValue={field.value}
                            onCheck={changeHandler}
                            label={field.title}/>
                    </div>
    })

    return (
        <div className="card-body">
            <div className="row padding" >
                <hr/>
                <div className="col-md-12 col-lg-12 col-sm-12">
                    <h3>rr</h3>
                    <form action="" >
                        <div>
                            {formFields}
                        </div>
                        <div>
                            <FlatButton label="Cancel" primary={true}  href="#/" linkButton={true}/>

                            <FlatButton label="Save" secondary={true} type="submit" onClick={this.saveHandler.bind(this)}/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}

}
Form.defaultProps = {

};

Form.propTypes = {
formData: PropTypes.array.isRequired,
changeHandler: PropTypes.func.isRequired
};

[alitaheri]

I don't see any component having ref="test".

which of these components cannot be referenced?

[munkh-altai]

test is just example i was just try get ref value from function