我正在尝试向数据库发出一个发布请求,以使用 "react-dom": "^15.6.1"
发布一个名为 questions 的对象。数据可能如下所示:
{description: 'What is E-commerce?', ismeeting: false, expID: '123A2'}
我想做的是从前端的表单和复选框(“ismeeting”的复选框)中获取“description”、“ismeeting”和“expID”值,并将其传递到后端。例如获取描述值;我正在使用 this.refs.description.value
。但是,我在 onSubmit(e) 函数中收到错误 Using this.refs is deprecated
,并且在 render() 函数中 Using stringliters in ref attributes is deprecated React/no-string-refs
这是OnSubmit 代码。
onSubmit(e) {
const newQues = {
description: this.refs.description.value,
ismeeting: this.refs.check_me.checked,
expID: this.refs.expID.value
};
this.addQues(newQues);
e.preventDefault();
}
这是render() 代码。
render() {
return (
<div>
<br/>
<h1> DO NOT HESISTATE TO ASK OUR EXPERTS </h1>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="input-field">
<input type="text" name="description" ref="description"/>
<label htmlFor="description"> Description </label>
</div>
<div className="input-field">
<input type="text" name="expID" ref="expID"/>
<label htmlFor="name"> expID </label>
</div>
<div className="checkbox">
<label>
<input type="checkbox" name="ismeeting" ref="check_me" />Meeting
</label>
</div>
<input type ="submit" value="ASK" className="btn" />
</form>
</div>
);
}
最后这是完整的代码。
import React, { Component } from 'react';
import axios from 'axios';
import '../Styles.scss';
class Questions extends Component {
addQues(newQues) {
console.log(newQues);
axios.request({
method: 'Post',
url: 'http://localhost:3001/api/Questions',
data: newQues
}).then(response => {
}).catch(err => console.log(err));
}
constructor() {
super();
this.state = {
Questions: []
};
}
onSubmit(e) {
const newQues = {
description: this.refs.description.value,
ismeeting: this.refs.check_me.checked,
expID: this.refs.expID.value
};
this.addQues(newQues);
e.preventDefault();
}
render() {
return (
<div>
<br/>
<h1> DO NOT HESISTATE TO ASK OUR EXPERTS </h1>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="input-field">
<input type="text" name="description" ref="description"/>
<label htmlFor="description"> Description </label>
</div>
<div className="input-field">
<input type="text" name="expID" ref="expID"/>
<label htmlFor="name"> expID </label>
</div>
<div className="checkbox">
<label>
<input type="checkbox" name="ismeeting" ref="check_me" />Meeting
</label>
</div>
<input type ="submit" value="ASK" className="btn" />
</form>
</div>
);
}
}
export default Questions;
最佳答案
字符串引用已被弃用。所以你需要做的是更新你的引用
<input type="text" name="expID" ref="expID"/>
应更新为
setExpIdRef = (r) => this.expIdRef = r;
onSubmit = (e) => {
const newQues = {
expID: this.expIdRef.value
};
// Do what you need to with newQuest i.e call your database
}
render() {
...
<input type="text" name="expID" ref={this.setExpIdRef}/>
}
最好的解决方案是让您的输入受控输入。您可以在其中跟踪状态值。
constructor() {
super();
this.state = {
expID: ''
};
}
onExpIdChange = (e) => {
this.setState({
expID: e.target.value
})
}
onSubmit = (e) => {
const newQues = {
expID: this.state.expID
};
// Do what you need with the newQues object
}
render() {
...
<input type="text" name="expID" onChange={this.onExpIdChange} />
}
关于node.js - 尝试使用 this.refs.value 时,使用 this.refs 已被弃用错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49783198/