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

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

然后我尝试console.log使用getInputDOMNode.value MyModel范围的参考，但它不起作用。

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

您需要将axios .then回调的上下文绑定到React Component上下文，以便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);
         });

无法读取未定义的属性'refs'

2 个答案: