Cannot read property 'refs' of undefined

Question

I have a problem when I want to get the value of a ref in React.

class Views_Find_Find extends React.Component {
    constructor(props){
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.handleRedirect = this.handleRedirect.bind(this);
    }

    handleClick(e){
        e.preventDefault();

        axios.get('/recherche/'+this.state.value)
             .then(function(response){
                 // Affichage dans les champs
                 // ReactDOM.findDOMNode(this.refs.span_client).render("test");
                console.log(this.refs.span_client.getInputDOMNode().value);
             })
             .catch(function (error) {
                 console.log(error);
             });
    }

    handleChange(event){
        this.setState({value: event.target.value});  
    }

    handleRedirect(event){
        window.location.replace("/amont/"+this.state.value);
    }

    render() {
        var data = this.props.data;

        return (
         <div className="div_recherche">
            <form action="">
                <label>Numéro de bon de travail : </label>
                <input type="text" name="id_traitement" onChange={this.handleChange}/>
                <input type="button" onClick={this.handleClick} value="Recherche un traitement" />
            </form>

            <table>
                <tbody>
                    <tr>
                        <td>Client</td>
                        <td><span id="span_client" className="span_client" ref="span_client">test</span></td>
                    </tr>
                    <tr>
                        <td>Type de traitement</td>
                        <td><span className="span_type_traitement"></span></td>
                    </tr>
                    <tr>
                        <td>Date de traitement</td>
                        <td><span className="span_date_traitement"></span></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="Modifier ce traitement" onClick={this.handleRedirect} /></td>
                    </tr>
                </tbody>
            </table>
        </div>
        );
    }
}

I saw that the problem can come from the binding of the handle functions, but I actually bound them in the constructor.

Then I try to console.log the ref of the span with getInputDOMNode.value but it doesn't work.

Answer 1

Use arrow function as axios success callbacks to preserve context, otherwise this doesn't point to your component instance:

axios.get('/recherche/'+this.state.value)
        .then((response) => {
            //Affichage dans les champs
            //ReactDOM.findDOMNode(this.refs.span_client).render("test");
            console.log(this.refs.span_client.getInputDOMNode().value);
        })

Answer 2

You need to bind the context of your axios .then callback to the React Component context so that this keyword points to the correct context where refs are defined, you can do it with bind or arrow functions like

 axios.get('/recherche/'+this.state.value)
         .then(function(response){
             // Affichage dans les champs
             // ReactDOM.findDOMNode(this.refs.span_client).render("test");
            console.log(this.refs.span_client.getInputDOMNode().value);
         }.bind(this))
         .catch(function (error) {
             console.log(error);
         }.bind(this));

or

 axios.get('/recherche/'+this.state.value)
         .then((response) => {
             // Affichage dans les champs
             // ReactDOM.findDOMNode(this.refs.span_client).render("test");
            console.log(this.refs.span_client.getInputDOMNode().value);
         })
         .catch((error) => {
             console.log(error);
         });