我想使用從下拉選單中獲得的值來查詢資料庫。我的下拉選單看起來像這樣
我的 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 代碼。我已經嘗試了很多，但它不起作用我會很高興如果我得到你們的任何幫助，我是全堆疊開發的新手，所以任何人都可以指導我請
uj5u.com熱心網友回復：
首先更改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>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/331490.html
上一篇：獲取來自不同行的值的公共列