problem.jsx

import React, { Component } from 'react';

class Problem extends Component {
    state = { 
        problems:[
            {key:0,number:1,title:'01背包',rate:'100%',difficulty:'简单',link:'https://www.acwing.com/problem/content/2/'},
            {key:1,number:2,title:'完全背包',rate:'100%',difficulty:'中等',link:'https://www.acwing.com/problem/content/3/'},
            {key:2,number:3,title:'多重背包',rate:'100%',difficulty:'中等',link:'https://www.acwing.com/problem/content/4/'},
            {key:3,number:4,title:'多重背包II',rate:'100%',difficulty:'困难',link:'https://www.acwing.com/problem/content/5/'},
            {key:4,number:5,title:'分组背包',rate:'100%',difficulty:'中等',link:'https://www.acwing.com/problem/content/9/'},
            {key:5,number:6,title:'混合背包',rate:'100%',difficulty:'中等',link:'https://www.acwing.com/problem/content/7/'},
        ],
    } 

    handleDelete=(p)=>{
        let problems=this.state.problems.filter(problem=> problem!==p);
        this.setState({
            problems
        })
    }

    render() { 
        return (
            <React.Fragment>
               <div style={{
                fontSize:'40px',
                textAlign:'center',
               }}><a style={this.getLinkStyle()} href='https://www.acwing.com/problem/' target='_blank'>AcWing在线题库</a></div>
               <div>
                <input style={{
                    marginLeft:"25%",
                    width:"50%",
                    height:'40px',
                    marginRight:'10px',
                    borderRadius:'5px',
                    border:'1px solid #ccc',
                    }} type="text" placeholder='搜索题号、标题、题目来源、算法、题目描述'/> 
                <button className='btn btn-success'>搜索</button>
               </div>
               <hr></hr>
               <table style={{
                textAlign:'center',
                fontSize:'20px',
               }} className="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>标题</th>
                            <th>通过率</th>
                            <th>难度</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.problems.map(problem=>(
                            <tr key={problem.key}>
                                <td>{problem.number}</td>
                                <td><a style={this.getLinkStyle()} href={problem.link} target='_blank'>{problem.title}</a></td>
                                <td>{problem.rate}</td>
                                <td><span style={{
                                    padding:'8px',
                                    color:'white',
                                    fontWeight:'600',
                                    borderRadius:'10px',
                                    backgroundColor:this.getDiffColor(problem.difficulty),
                                }}>{problem.difficulty}</span></td>
                                <td><button onClick={()=>this.handleDelete(problem)} className='btn btn-danger'>删除</button></td>
                            </tr>
                        ))}
                    </tbody>
               </table>
            </React.Fragment>
        );
    }

    getDiffColor(difficulty){
        if(difficulty==='简单')return '#5CB85C';
        else if(difficulty==='中等')return '#F0AD4E';
        else if(difficulty==='困难')return '#D9534F';
    }

    getLinkStyle(){
        return {
            color: '#337ab7',
            textDecoration: 'none',
        }
    }
}

export default Problem;