How to get the value of a clicked element in react.
event.currentTarget.value shows 'undefined' in react 16. Does anyone know what is the trick here ??
BTM here is the code for an instance:
class Test extends React.Component{
constructor(){
super();
}
changeDimension(e){
alert(e.currentTarget.value);
}
render(){
return(
<div style={{height : this.state.height}} >
<h1 onClick={this.changeDimension.bind(this)}> Click Me</h1>
</div>
);
}
}
The value attribute is not set in:
<h1 onClick={this.changeDimension.bind(this)}> Click Me</h1>
If you need the "Click Me" text then use:
alert(e.currentTarget.innerHTML);
If you want something other than "Click Me" alerted:
<h1 onClick={this.changeDimension.bind(this)} data-value="something other"> Click Me</h1>
Then:
alert(event.target.dataset.value)
on those cases , i generally pass directly the value as a parameter on the function , especially if i have multiple buttons generated by a loop , for example :
{this.state.dimensions.map(dimension => <h1 onClick={() => this.changeDimension(dimension)}>{dimension.value}</h1>)}
Related
How can i show/hide elements in a list using react? I have buttons with data-attribute
and i want when click show elements with this classname and hide the others.
example here:
class ModelosItems extends React.Component {
handleCheck(e) {
console.log(e.currentTarget.dataset.gama );
}
render() {
return (
<section className="section">
<div className="container">
<h2 className="title is-size-4 has-text-centered is-uppercase has-text-weight-bold">Gama kia</h2>
<div className="tabs-container">
<div className="fade"></div>
<div className="tabs">
<ul>
<li className="is-active">Gama Completa</li>
<li>Cidatidos e Familiares</li>
<li>Suv e Crossover</li>
</ul>
</div>
</div>
<ModelsList />
</div>
</section>
);
}
};
export default ModelosItems;
Thank you!
For hide the other datas and just show the special data, you have to filter your list. After, you can for example, add a CSS class whose this class hide the other datas, and you'll have just your special data showed.
A tutorial : https://www.youtube.com/watch?v=HqQ-kOchqHM
Utilize local state for this. Initialize it with the first value (probably todos) and update it when you select another type correspondingly.
Next, pass this state data attribute to ModelsList component as a prop and simply filter the items within the list.
Introduce state to ModelosItems
constructor(props) {
super(props);
this.state = {currentGama: null};
}
on click update state
handleCheck(e) {
this.setState({
currentGama: e.currentTarget.dataset.gama
});
}
Add new prop to ModelosItems gama and feed currentGama state value to it
<ModelsList gama={this.state.gama} />
In your ModelList component, I'm guessing here
cars.filter(car => car.gama === this.props.gama).map(...
this will result in rendering only cars that have right gama. This does not use classnames to hide cars. But I think this is what you need.
I am trying to display a div pop up on click of a span. Even though the code inside the function is executing, the div is not at all visible in the DOM.
Am not sure where I am going wrong.
<span id="test" onClick={()=>this.bindPopUpData("test")}>
Here I am calling the function to bind popup.
bindPopUpData=(dimension) =>{
return (
<div id="">
<div className="details_table">
<div className="close_popup">
<span className="icon-Close"></span>
</div>
</div>
</div>
);
}
-- Here I am trying to bind that popup
Can someone please tell where I am going wrong?
The issue is that your event handler is just returning a value, you're not telling the browser to put it anywhere.
Option 1: build the popup into the DOM with display:none and use your event handler to show/hide it.
Option 2: make your event handler inject the popup into the DOM with document.createElement and document.appendChild functionalities.
With React I'd recommend option 1 because you can make the popup a component and only render it if the parent component detects the event.
class myComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
showpopup: false
}
this.myHandler = this.myHandler.bind(this)
}
myHandler () {
this.setState({showpopup: !showpopup})
}
render () {
return (
<section>
<span onClick={this.myHandler}></span>
{this.state.showpopup ? <Popup /> : ''}
</section>
)}
}
So I have a component, called AddButton
export default class AddButton extends React.Component {
constructor(props) {
super(props);
}
addItem(e) {
this.btn.setAttribute('disabled', 'disabled');
this.props.addItem(e.target.getAttribute('data-row-index'))
}
render() {
return (
<div className="row">
<div className="col-md-12 text-center">
<button ref={btn => {this.btn = btn }} className="btn btn-success" onClick={this.addItem.bind(this)} data-row-index={this.props.rowIndex}>Add</button>
</div>
</div>
)
}
}
Some where else in the code I do:
if (this.props.addButton) {
rows.push(
<td key="add">
<AddButton
addItem={this.props.addItem}
rowIndex={this.props.rowIndex}
/>
</td>
)
}
So I have at one time 50 of these in a table at the end of the row. When one is clicked I wanted to disable all the buttons.
So as you can see I have done, in addItem(e):
addItem(e) {
this.btn.setAttribute('disabled', 'disabled');
this.props.addItem(e.target.getAttribute('data-row-index'))
}
But when I test this, only the button after the one is clicked is disabled. I want them all to be disabled
Any way I could modify this to achieve that?
React components have syntax like HTML DOM but they are not, they are modules and every time you use that module for example in your table it would be a new instance of that module. So if you want to share a state between them you have to pass it as props to them and you shouldn't treat them as HTML nodes.
I want to load my array element when an event is occurred by referencing the key i tried different variables for the key but it would not accept all the elements of the array are being displayed if i give index as the key.
I am new to Reactjs and not very familiar with all the syntax and concept can somebody help me with the logic to solve this.
The event I am triggering is onClick or onChange.
`var Qstn =['A','B','C','D','E','F','G','H','I','J'];
<div>
{Qstn.map(function(Q,index){
return <span className="col-md-4 txt" key={index}>{Q}</span>
})}
</div>`
Ok I made a codepen with an example
http://codepen.io/lucaskatayama/pen/QGGwKR
It's using ES6 classes components, but it's easy to translate.
You need to set initial state to an empty array like [].
On click button, it call onClick() method which uses this.setState({}) to change component state.
When React notice state changes, it re-render the component.
class Hello extends React.Component {
constructor(){
super();
//Initial State
this.state = {
Qstn : []
}
}
onClick(){
//Called on click button
// Set state to whatever you want
this.setState({Qstn : ['A','B','C','D','E','F','G','H','I','J']})
}
render(){
let Qstn = this.state.Qstn; // load state and render
return (
<div>
<button onClick={() => this.onClick()}>Click</button>
<div>
{Qstn.map(function(Q,index){
return <span className="col-md-4 txt" key={index}>{Q}</span>
})}
</div>
</div>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('container'))
I have an issue in my React.js app with the target id not being passed if a onClick event is attached on a div element.
This is how I add the component:
<MenuOption title="Users" onOptionClick={this.onOptionClick}/>
This is the jsx-part of my MenuOption component:
<div id={title} className="row menu-option" onClick={onOptionClick}>
<p>{title}</p>
</div>
As you can see I'm simply assigning the prop title as the id and the onClick event.
Back in the parent component, implementation of the onClick method:
onSidebarOptionClick(e) {
console.log(e.target.id);
}
This does not seem to work since it always logs undefined.
However, if I add the id and the onClick event to my p element instead...
<div className="row menu-option">
<p id={title} onClick={onOptionClick}>{title}</p>
</div>
...it works just as expected, the correct id logs at every click.
So why is not the id passed if the click event is attached to a div?
I`m using ES6 and babel.
I should clarify that I'm using "dumb" components, declaring them like this:
const MenuOption = ({title, onOptionClick})
...which is why don't need to use {this.props.title} when using it.
Not sure as your Question missing constructor but try one of the following--
Method 1 (JSX):
<MenuOption title="Users" onOptionClick={this.onOptionClick.bind(this)}/>
Method 2 (es6):
constructor(props) {
super(props);
this.onOptionClick = this.onOptionClick.bind(this);
}
Method 3(es-next):
onSidebarOptionClick = (e) => {
console.log(e.target.id);
}
As you're passing onOptionClick as a prop to <MenuOption/>, it should be declared as this.porops.onOptionClick.
<MenuOption/> should look like this
<div id={title} className="row menu-option" onClick={thi.props.onOptionClick}>
<p>{title}</p>
</div>
Hope this helps!