无法读取未定义的属性“引用”

Question

我想在React中获得ref的值时遇到问题。

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

我看到问题可能出在句柄函数的绑定上，但实际上是在构造函数中绑定了它们。

然后，我尝试使用getInputDOMNode.value来console.log跨度的引用，但是它不起作用。

Answer 1

使用箭头功能Axios公司成功回调保护范围内，否则this并不指向您的组件实例：

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

你需要绑定你的爱可信的背景下.then回调到阵营组件上下文，以便this关键字指向正确的上下文，其中refs的定义，你可以用绑定或箭头功能，如做

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

要么

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