在ReactJS中设置条件onClick行为 [英] Setting conditional onClick behaviour in ReactJS

问题描述

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

(This is my first time using React) I am working on app that filters videos based on the button click and this is the code below

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函数，类似

I was thinking of a way to reduce redundancy in my code, so I want to add an onclick function, semthing like

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

是否知道JSX是否以及如何处理这种情况?

Any idea if and how JSX handles a situation like this?

推荐答案

最好将按钮单击抽象为自己的功能.

The idea is good to abstract the button click into its own function.

onClick将event作为值传递给函数，您可以从中获取ID或值或任何一个属性.

onClick passes event as a value to the function and you can get the id or value or which ever attribute from that.

如果您要使用

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

您将在过滤后失去原始视频状态.

The your are going to loose your original video state after filtering.

我建议将过滤后的状态存储到另一个变量中.这样，您可以选择重置过滤器.

I would recommend storing the filtered state into a different variable. This way you have the option to reset the filter.

结合 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>

这篇关于在ReactJS中设置条件onClick行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！