I have created a component
import React, { Component } from 'react'
import AppStep from '../common/AppStep'
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
class Step2 extends Component {
constructor(props) {
super(props);
this.togglePhoto = this.togglePhoto.bind(this);
this.selectPhoto = this.selectPhoto.bind(this);
this.toggleDoc = this.toggleDoc.bind(this);
this.selectDoc = this.selectDoc.bind(this);
this.state = {
dropdownOpenDoc: false,
dropdownOpenPhoto: false,
valueDoc : "រូបថត",
valuePhoto : "រូបថត"
};
}
toggleDoc(event) {
console.log(event.target.innerText)
this.setState({
dropdownOpenDoc: !this.state.dropdownOpenDoc
});
}
selectDoc(event) {
//console.log(event.target.innerText)
this.setState({
dropdownOpenDoc: !this.state.dropdownOpenDoc,
valueDoc: event.target.innerText
});
}
togglePhoto(event) {
console.log(event.target.innerText)
this.setState({
dropdownOpenPhoto: !this.state.dropdownOpenPhoto
});
}
selectPhoto(event) {
//console.log(event.target.innerText)
this.setState({
dropdownOpenPhoto: !this.state.dropdownOpenDocPhoto,
valuePhoto: event.target.innerText
});
}
renderForm() {
return (
<form className="needs-validation" name="loan-info" noValidate method="POST" action="/">
<hr className="mb-4"/>
<div className="row">
<div className="col-md-6 mb-3">
<div className="btn-group">
<ButtonDropdown isOpen={this.state.dropdownOpenPhoto} toggle={this.togglePhoto}>
<DropdownToggle caret>{this.state.valuePhoto}</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.selectPhoto}>ថតថ្មីពីកាមេរា</DropdownItem>
<DropdownItem onClick={this.selectPhoto}>ដាក់រូបដែលមានស្រាប់</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
<div id="photo-placholder">
<img className="img-placeholder-photo" src="holder.js/312x225"/>
<div className="custom-camera" id="camera-photo">
<img className="img-placeholder" src="img/kanel.png"/>
</div>
<div className="custom-file" id="upload-photo" >
<input type="file" className="custom-file-input" id="photo-input-file" aria-describedby="fileHelp" required />
<label className="custom-file-label" htmlFor="photo-input-file">
ជ្រើសរូបថតអ្នក
</label>
<div className="invalid-feedback">
អ្នកចាំបាច់បំពេញ ជ្រើសរូបថត
</div>
</div>
</div>
</div>
<div className="col-md-6 mb-3">
<div className="btn-group">
{/* Render another dropdown list */}
<ButtonDropdown isOpen={this.state.dropdownOpenDoc} toggle={this.toggleDoc}>
<DropdownToggle caret>{this.state.valueDoc}</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.selectDoc}>ថតថ្មីពីកាមេរា</DropdownItem>
<DropdownItem onClick={this.selectDoc}>ដាក់រូបដែលមានស្រាប់</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
I want to add more dropdown list which has difference display,I don't want to copy the same functions , anyone could guide how can just pass the params and handle its output.
Thanks
Assuming I am correct at this comment, I believe you can solve your problem with event.currentTarget
. This is a vanilla javascript thing, here is the documentation.
Essentially, event.currentTarget
always refers to the exact element that raised the event. So it will always refer to the specific dropdownlist that raised your toggle event.
Note, do NOT confuse event.target
with event.currentTarget
. event.target
has varying results; because, the element it can refer to can change due to things like event bubbling.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments