在 ReactJS 中设置条件 onClick 行为答案

【问题标题】：Setting conditional onClick behaviour in ReactJS在 ReactJS 中设置条件 onClick 行为
【发布时间】：2020-08-23 01:49:36
【问题描述】：

（这是我第一次使用 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 是否以及如何处理这种情况？

【问题讨论】：

标签： reactjs jsx

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：