在ReactJS中设置条件onClick行为

Question

(这是我第一次使用React(我正在开发基于按钮点击过滤视频的应用程序，这是下面的代码

const data = [{ address: 'https://www.youtube.com/watch?v=eIrMbAQSU34', category: 'java' },
{ address: 'https://www.youtube.com/watch?v=RRubcjpTkks', category: 'C#' }];
class User extends React.Component { 
constructor(props){
super(props);
this.state={
videos : data,
};
}
render(){
return (
<div className="box">
<div className="buttons-filter">
<button onClick={()=>{
this.setState({videos: data })        
}}>
All
</button>
<button id="btnJava" onClick={()=>{
this.setState({videos: data },
()=>{
this.setState({
videos: this.state.videos.filter(item => { return item.category === 'java';})
})
})           
}}>
Java
</button>
<button id="btnReact" onClick={()=>{
this.setState({videos: data },
()=>{
this.setState({
videos: this.state.videos.filter(item => {return item.category==='React';})
})
}) 
}} >
React
</button>
</div>
<div className="content">
<div className="wrapper">
{this.state.videos.map(video => (
<ReactPlayer className="vid" url={video.address}  controls={true} height="300" width="350" />
))} 
</div>
</div>
<div className='bottom-btn'>
{/* <a className='btn-logout'><Link to="/Login" className='link'>Logout</Link></a> */}
</div>
</div>
);
}
};
export default User;

我在想一种减少代码冗余的方法，所以我想添加一个onclick函数，类似

onClick(){ 
if(button.id === 'btnJava')
{
this.setState({videos: this.state.videos.filter(item => { 
return item.category === 'java';})})
}
else if()
{}
}

你知道JSX是否以及如何处理这样的情况吗？

Answer 1

您可以使用一个函数来处理基于按钮值的所有情况：

handleClick = (event) => {
const value = event.target.value;
this.setState({ videos: this.state.videos.filter(item => { 
return item.category === value
})
})
}

<button value="java" onClick={this.handleClick}>Java</button>
<button value="React" onClick={this.handleClick}>React</button>

Answer 2

将按钮点击抽象为自己的函数是个好主意。

onClick将event作为值传递给函数，您可以从中获取id或值或哪个属性。

如果您要使用

this.setState({videos: this.state.videos.filter(item => { 
return item.category === 'java';
})

您的将在过滤后丢失您的原始视频状态。

我建议将过滤后的状态存储到不同的变量中。通过这种方式，您可以选择重置过滤器。

结合HermitCrab 的答案

this.state={
videos : data,
filtered: data
};
...
handleClick = (event) => {
const value = event.target.value;
this.setState({ filtered: this.state.videos.filter(item => { 
return item.category === value
})
})
}
...

<div className="box">
<div className="buttons-filter">
<button value="java" onClick={this.handleClick}>Java</button>
<button value="React" onClick={this.handleClick}>React</button>
</div>
<div className="content">
<div className="wrapper">
{this.state.filtered.map(video => (
<ReactPlayer className="vid" url={video.address}  controls={true} height="300" width="350" />
))} 
</div>
</div>