Having some trouble getting this code to work. Simply want to handle each button case differently using one function instead of 3 separate ones. Some very old stackoverflow answers recommended using a switch, but I can't seem to get it working. I get no errors with the below code, but pushing the buttons doesn't print anything to console.
myFunction = button => {
var x = button.id;
switch (x) {
case 'All Saves':
console.log('All Saves');
break;
case 'Threads':
console.log('Threads');
break;
case 'Comments':
console.log('Comments');
break;
default:
return false;
}
}
render () {
return (
<div className="container">
<div className="btn-group">
<button type="button" onClick={this.myFunction.bind(this)} id="All Saves">All Saves</button>
<button type="button" onClick={this.myFunction.bind(this)} id="Threads">Threads</button>
<button type="button" onClick={this.myFunction.bind(this)} id="Comments">Comments</button>
</div>
</div>
)
}
You are forgetting to access the event's target
property:
myFunction = button => {
var x = button.target.id;
switch (x) {
case 'All Saves':
console.log('All Saves');
break;
case 'Threads':
console.log('Threads');
break;
case 'Comments':
console.log('Comments');
break;
default:
return false;
}
}
call the function with the click event :
class App extends React.Component { myFunction = event => { var x = event.target.id; switch (x) { case 'All Saves': console.log('All Saves'); break; case 'Threads': console.log('Threads'); break; case 'Comments': console.log('Comments'); break; default: return false; } } render() { return ( <div className="container"> <div className="btn-group"> <button type="button" onClick={e => this.myFunction(e)} id="All Saves">All Saves</button> <button type="button" onClick={e => this.myFunction(e)} id="Threads">Threads</button> <button type="button" onClick={e => this.myFunction(e)} id="Comments">Comments</button> </div> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
class MyButtons extends React.Component { myFunction = event => { var x = event.target.id; switch (x) { case 'All Saves': console.log('All Saves'); break; case 'Threads': console.log('Threads'); break; case 'Comments': console.log('Comments'); break; default: return false; } } render() { return ( <div className="container"> <div className="btn-group"> <button type="button" onClick={e => this.myFunction(e)} id="All Saves">All Saves</button> <button type="button" onClick={e => this.myFunction(e)} id="Threads">Threads</button> <button type="button" onClick={e => this.myFunction(e)} id="Comments">Comments</button> </div> </div> ); } } ReactDOM.render(<MyButtons />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
Here is the working example for your problem
I'm not sure about this but try not putting space between two words in I'd like All values replace with it All-values . May be it can help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.