[英]Get selected dropdown value from react to nodejs
我想使用从下拉菜单中获得的值来查询数据库。 我的下拉菜单看起来像这样
我的 nodejs db 查询将如下所示
app.get('/model', (req,res)=>{
let sql ="select * from new_schema.model_list,new_schema.images where model_name='?' and dataset='?';"
db.query(sql, (err,results) =>{
if(err){
throw err
}
console.log(results)
res.send(results);
})
})
我希望下拉选择的值传递给上面的 NodeJS 查询
我的下拉代码:const options = [ { label: "Cat", value: "cat", }, { label: "Traffic", value: "traffic", }, { label: "Dog", value: "dog" , },
];
class Inference extends React.Component {
constructor(props) {
super(props);
this.state = {
courses: [],
course: "",
model:'',
dataset:''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
console.log("Model Selected!!");
this.setState({ model: e.target.value });
};
handleChangeDataset(e) {
console.log("Dataset Selected!!");
this.setState({ dataset: e.target.value });
};
handleChangeCourse = event => {
this.setState({ course: event.target.value });
};
getUnique(arr, comp) {
const unique = arr
//store the comparison values in array
.map(e => e[comp])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter(e => arr[e])
.map(e => arr[e]);
return unique;
}
componentDidMount() {
axios.get('http://localhost:5000/files')
.then(response => this.setState({ courses: response.data }));
}
render() {
const uniqueCouse = this.getUnique(this.state.courses, "dataset");
const courses = this.state.courses;
const course = this.state.course;
const filterDropdown = courses.filter(function(result) {
return result.dataset === course;
});
return (
<div className="container">
<div className="row">
<div className="col-6" style={{paddingBottom:"100px",paddingTop:"20px",alignItems:"center"}}>
<label className=""style={{paddingTop:"5px",marginTop:"40px"}}>
Dataset
<select className="custom-select"
value={this.state.course}
onChange={this.handleChangeCourse} style={{paddingTop:"5px",marginTop:"10px"}}
>
<option>--Select--</option>
{uniqueCouse.map(course => (
<option key={course.id} value={course.dataset}>
{course.dataset}
</option>
))}
</select>
</label>
</div>
<div className="col-6" style={{paddingBottom:"100px",paddingTop:"20px",alignItems:"center"}}>
<label className=""style={{paddingTop:"5px",marginTop:"40px"}}>
Model
<form method="post" action="getJson">
<select className="custom-select" name="example"
value={this.state.model} onChange={this.handleChange} style={{paddingTop:"5px",marginTop:"10px"}}
>
<option>--Select--</option>
{options.map((option) => (
<option value={option.value} onChange={(e) => this.setState({model:e.target.value}) }>{option.label}</option>
))}
</select>
</form>
</label>
</div>
{filterDropdown.map(course => (
<div className="col-2">
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1" className="labell">
<img key={course.id} src={`${course.path}`} height="80" className="card-img-top img-responsive" alt="img" />
</label>
</div>
))}
</div>
<button type="button" class="btn btn-success" style={{marginTop:"100px"}}>Inference</button>
</div>
);
}
}
我想将选定的值传递给 nodejs 代码。我已经尝试了很多,但它不起作用我会很高兴如果我得到你们的任何帮助,我是全栈开发的新手,所以任何人都可以指导我请
首先将this.state({model:e.target.value})
更改为this.setState({model:e.target.value})
。 然后说你有什么问题
编辑:您需要form
内的所有用户输入。 所以onSubmit
你可以得到它们。 在这里你会在handleSubmit
找到,我正在记录值
import React from "react";
export default class Inference extends React.Component {
constructor(props) {
super(props);
this.state = {
courses: [],
course: "",
model: "",
dataset: "",
options: [
{ label: "Cat", value: "cat" },
{ label: "Traffic", value: "traffic" },
{ label: "Dog", value: "dog" },
],
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
console.log("Model Selected!!");
this.setState({ model: e.target.value });
}
handleChangeDataset(e) {
console.log("Dataset Selected!!");
this.setState({ dataset: e.target.value });
}
handleChangeCourse = (event) => {
this.setState({ course: event.target.value });
};
getUnique(arr, comp) {
const unique = arr
//store the comparison values in array
.map((e) => e[comp])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter((e) => arr[e])
.map((e) => arr[e]);
return unique;
}
handleSubmit(event) {
event.preventDefault();
const { example } = event.target;
console.log("value", example.value);
}
componentDidMount() {
// axios
// .get("http://localhost:5000/files")
// .then((response) => this.setState({ courses: response.data }));
let data = [
{
id: 1,
name: '"black.jpeg"',
path: "kaet1.s3.amazonaws.com/black-1634797820425.jpeg",
dataset: "dataset",
username: "user",
model: "traffic",
createdAt: "2021-10-21T01:00:22.000Z",
updatedAt: "2021-10-21T01:00:22.000Z",
},
];
this.setState({ courses: data });
}
render() {
const uniqueCouse = this.getUnique(this.state.courses, "dataset");
const { courses, course, options } = this.state;
const filterDropdown = courses.filter(function (result) {
return result.dataset === course;
});
return (
<div className="container">
<div className="row">
<div
className="col-6"
style={{
paddingBottom: "100px",
paddingTop: "20px",
alignItems: "center",
}}
>
<label
className=""
style={{ paddingTop: "5px", marginTop: "40px" }}
>
Dataset
<select
className="custom-select"
value={this.state.course}
onChange={this.handleChangeCourse}
style={{ paddingTop: "5px", marginTop: "10px" }}
>
<option>--Select--</option>
{uniqueCouse.map((course) => (
<option key={course.id} value={course.dataset}>
{course.dataset}
</option>
))}
</select>
</label>
</div>
<div
className="col-6"
style={{
paddingBottom: "100px",
paddingTop: "20px",
alignItems: "center",
}}
>
<label
className=""
style={{ paddingTop: "5px", marginTop: "40px" }}
>
Model
<form method="post" onSubmit={this.handleSubmit}>
<select
className="custom-select"
name="example"
value={this.state.model}
onChange={this.handleChange}
style={{ paddingTop: "5px", marginTop: "10px" }}
>
<option>--Select--</option>
{options.map((option) => (
<option
value={option.value}
onChange={(e) => this.setState({ model: e.target.value })}
>
{option.label}
</option>
))}
</select>
{filterDropdown.map((course) => (
<div className="col-2">
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1" className="labell">
<img
key={course.id}
src={`${course.path}`}
height="80"
className="card-img-top img-responsive"
alt="img"
/>
</label>
</div>
))}
<button
type="submit"
class="btn btn-success"
style={{ marginTop: "100px" }}
>
Inference
</button>
</form>
</label>
</div>
</div>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.