让该代码工作有些困难。只想使用一个功能而不是3个单独的功能以不同的方式处理每个按钮案例。一些非常旧的Stackoverflow答案建议使用开关,但我似乎无法正常工作。我对以下代码没有任何错误,但是按下按钮并没有打印任何内容以控制。
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;
}
}
用单击事件调用功能:
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>
这是您问题的工作示例
https://codesandbox.io/s/gifted-night-di8de?fontsize=14