在 ReactJS 中设置条件 onClick 行为

IT技术 reactjs jsx
2021-05-06 11:58:11

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

2个回答

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

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>

将按钮单击抽象为自己的功能的想法很好。

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

如果你要使用 

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>
其它你可能感兴趣的问题
上一篇在 Django 中 React 还是作为一个独立的 React？ 下一篇React 导入语句的标准方法