[英]Cannot read property 'refs' of undefined
I have a problem when I want to get the value of a ref in React. 我想在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>
);
}
}
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. 然后,我尝试使用
getInputDOMNode.value
来console.log
跨度的引用,但是它不起作用。
Use arrow function as axios success callbacks to preserve context, otherwise this
doesn't point to your component instance: 使用箭头功能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);
})
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 你需要绑定你的爱可信的背景下
.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));
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.