react文档demo 交互式表格

最新推荐文章于 2022-12-07 18:21:58 发布

BEconfidence

最新推荐文章于 2022-12-07 18:21:58 发布

阅读量311

点赞数 1

分类专栏： web

本文链接：https://blog.youkuaiyun.com/a197p/article/details/97195647

版权

web 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用React构建的产品筛选器应用，通过输入搜索和勾选选项，用户可以过滤显示的产品列表。文章展示了如何使用props传递数据，state进行状态管理和组件之间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用props传递静态数据，state进行状态更新。

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import * as serviceWorker from './serviceWorker';

// ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();

function Search(props) {
    function handlechange(e){
        props.onChange(e.target.checked);
    }
    function handletext(e){
        props.onChangetext(e.target.value);
    }
    return (
        <div>
            <input type="text" name="" placeholder="Search..." onChange={handletext}/>
            <div>
                <input type="checkbox" onChange={handlechange}/><span>Only show products in stock</span>
            </div>
        </div>
    )
}
function Row(props){
    let data=props.data;
    const list=props.data.map((x,i)=>{
        return (
            <li key={i}><span>{x.name}</span><span>{x.price}</span></li>
        )
           
        
    })
    console.log(list)
    return (
        <div>
            <div>{props.name}</div>
            <ul>
            {list}
            </ul>
        </div>
    )
}
function Product(props) {
    const length=props.data.length;
    if(length == 0) return (
        <div></div>
    );
    const name1=props.data[0].category,name2=props.data[length-1].category;
    const list1=props.data.filter(x=>{ if(x.category === name1) return x; })
    const list2=props.data.filter(x=>{ if(x.category === name2) return x; })
    return (
        <div>
            <div>
                <span>Name</span>
                <span>Price</span>
            </div>
            <Row name={name1} data={list1} />
            <Row name={name2} data={list2} />
        </div>
    );
}
class Filter extends React.Component {
    constructor(props) {
        super(props)
        this.state={text:'',in:false};
        this.onChange=this.onChange.bind(this);
        this.onChangetext=this.onChangetext.bind(this);
    }
    onChange(e){
        this.setState({in:e});
        
    }
    onChangetext(e){
        this.setState({text:e});
        // console.log(this.state);
    }
    render() {
        // console.log(this.props.data);
        let list=[];
      
        let show=this.state.in;
        // console.log(show);
        if(show) {
            list=this.props.data.map((x)=>{
                let tmp={};
                for(let i in x){
                    if(i != 'price') tmp[i]=x[i];
                    // console.log(i);
                }
                // console.log(tmp)
            return tmp;
            })
            // console.log('list',list);
        }else{
            list=this.props.data;
        }
        let test=this.state.text;
        let length =list.length;
        list=list.filter((x)=>{
            for(var i in test){
                console.log(test[i].toLocaleLowerCase(),x.name[i].toLocaleLowerCase());
                if(i>=x.name.length||test[i].toLocaleLowerCase()!=x.name[i].toLocaleLowerCase()) return false;
            }
            return true;
        })
        return (
            <div>
                <Search onChange={this.onChange} onChangetext={this.onChangetext}/>
                <Product data={list}/>
            </div>
        )

    }
}
const data =
    [
        { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
        { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
        { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
        { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
        { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
        { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
    ];
ReactDOM.render(
    <Filter data={data} />, document.getElementById("root")
)