[英]I want to get selected value from select options on button click in react.js
I want to get the selected value from the dropdown on button click and then I want to save it in the firebase database.我想从单击按钮的下拉列表中获取选定的值,然后我想将其保存在 firebase 数据库中。 Everything is working fine except dropdown.
除了下拉菜单外,一切正常。 I also want to add a dropdown value in the firebase database.
我还想在 firebase 数据库中添加一个下拉值。 Anyone can help me how can I get it?
任何人都可以帮助我如何获得它? I'm trying but it is giving error.
我正在尝试,但它给出了错误。 Anyone can help me?
任何人都可以帮助我吗?
import React, { Component } from 'react';
import Select from 'react-select';
import firebase from '../config/firebase.js';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class PostAd extends React.Component {
constructor() {
super();
this.state = {
selectedOption: null,
ads: [],
};
}
handleClick = () => {
firebase.database().ref('/').child('ads').push(this.state);
console.log(`Option selected:`, selectedOption);
};
handleChange = (e) => {
this.setState({
selectedOption,
[e.target.name]: e.target.value,
});
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<div className="container postAd-container">
<h6 className="p-3">CHOOSE A CATEGORY</h6>
<hr />
<Select value={selectedOption} onChange={this.handleChange} options={options} />
<div className="p-3">
<div className="">
<p>Condition *</p>
<button className="btn-attributes" name="new" value="new" onClick={this.handleChange}>
New
</button>
<button className="btn-attributes" name="used" value="used" onClick={this.handleChange}>
Used
</button>
</div>
<div className="pt-2">
<p>Type *</p>
<button className="btn-attributes">Apple</button>
<button className="btn-attributes">Dany Tabs</button>
<button className="btn-attributes">Q Tabs</button>
<button className="btn-attributes">Samsung</button>
<button className="btn-attributes">Other Tablets</button>
</div>
<div className="pt-5">
<p>Ad Title *</p>
<div className="form-group row">
<div className="col-sm-6">
<input
type="email"
name="adTitle"
onChange={this.handleChange}
className="form-control form-control-lg"
/>
<p className="font-11">Mention the key features of your item (e.g. brand, model, age, type) 0 / 70</p>
</div>
</div>
</div>
<div className="pt-5">
<p>Description *</p>
<div className="form-group row">
<div className="col-sm-6">
<textarea name="description" onChange={this.handleChange} className="form-control" rows="3"></textarea>
<p className="font-11">Include condition, features and reason for selling 0 / 4096</p>
</div>
</div>
</div>
</div>
<hr />
<div className="p-4">
<div className="">
<h6>SET A PRICE</h6>
<div className="form-group row">
<div className="col-sm-6">
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">Rs</div>
</div>
<input type="number" name="price" onChange={this.handleChange} className="form-control" />
</div>
</div>
</div>
</div>
</div>
<div className="form-row pb-3">
<div className="col-md-12 text-center">
<button type="submit" className="btn btn-primary" onClick={this.handleClick}>
Post Ad
</button>
</div>
</div>
</div>
);
}
}
export default PostAd;
Make a seperate function this.handleClickButton and use it for New and Used buttons.创建一个单独的函数this.handleClickButton并将其用于新建和使用按钮。 instead this.handleChange
取而代之的是this.handleChange
handleClickButton = e => {
this.setState({
[e.target.name]: e.target.value
});
};
handleChange = selectedOption => {
this.setState({
selectedOption
},() => {
console.log(`Option selected:`, this.state.selectedOption);
});
};
This code will change the dropdown without any error.此代码将更改下拉列表而不会出现任何错误。
If you would like to manage both with the same function.如果您想使用相同的功能管理两者。 Following is the solution:
以下是解决方案:
handleChange = selectedOption => {
//onClick it will get e.target.value
if (e.target.value) {
this.setState({
[e.target.name]: e.target.value
});
} else {
//onChange it will get the selected option.
this.setState({
selectedOption: e
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.