[英]One function handles multiple buttons
在使此代码工作时遇到一些麻烦。 只是想使用一个功能而不是 3 个单独的功能以不同的方式处理每个按钮案例。 一些非常旧的 stackoverflow 答案建议使用 switch,但我似乎无法让它工作。 下面的代码没有错误,但是按下按钮不会向控制台打印任何内容。
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>
)
}
您忘记访问事件的target
属性:
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;
}
}
使用click事件调用该函数:
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>
这是您的问题的有效示例
我对此不太确定,但请不要在两个单词之间插入空格,以使All value替换为All-values 。 可能会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.