从零开始学习ReactJS(三)--antd的使用

岳迪
2023-12-01

美化界面

Ant Design

  我们先来认识一下这个antd(点这里查看组件总览),可以说这是一个非常好用且相对完备的组件库了,我们这里需要用到的input输入框list列表。在使用它之前我们需要先安装依赖npm install -S antd,具体如何在create-react-app中使用antd组件库,请参阅官方文档

输入框

  我们找到一个合适的输入框样式,查看一下它的代码,并用它替换掉我们原来的form标签及里面的内容

    <Search
      placeholder="input tasks"
      enterButton="Add"
      size="large"
      onSearch={value => console.log(value)}
    />

  我们发现当我们点击Add按钮时,控制台上就会显示出我们输入框中的内容了,接下来我们要做的就是改造一下并在组件中使用addItem这个函数。这很简单吧,我们只需要把这里的value作为参数传给addItem就可以了。

addItem(text) {
      if (text !== "") {
        var newItem = {
            text,//相当于text:text,
            key: Date.now()
        };

        this.setState((prevState) => {
            return {
                items: prevState.items.concat(newItem)
            };
        });
    }
    console.log(this.state.items);
    }

  原来的e.preventDefault()可以去掉了,因为我们这时并不会触发浏览器默认行为。

列表

  接下来就是list列表,这是官方给出的Demo

     <List
        className="demo-loadmore-list"
        loading={initLoading}
        itemLayout="horizontal"
        loadMore={loadMore}
        dataSource={list}
        renderItem={item => (
          <List.Item
            actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
          >
            <Skeleton avatar title={false} loading={item.loading} active>
              <List.Item.Meta
                avatar={
                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                }
                title={<a href="https://ant.design">{item.name.last}</a>}
                description="Ant Design, a design language for background applications, is refined by Ant UED Team"
              />
              <div>content</div>
            </Skeleton>
          </List.Item>
        )}
      />

  但是还有一个组件就是table,二者都可以选择,但是我们后面还需要用到勾选框,所以综合考虑了一下,我们选择用table组件。

import React, { Component } from "react";
import { Input, Table} from 'antd';
import "./App.css"
const { Search } = Input;
const columns = [
    {
        title: 'Task',
        dataIndex: 'text',
    }
];

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            selectedRowKeys: []
        };
        this.addItem = this.addItem.bind(this);
    }

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    addItem(text) {
        if (text !== "") {
            var newItem = {
                text,
                key: Date.now()
            };

            this.setState((prevState) => {
                return {
                    items: prevState.items.concat(newItem)
                };
            });
        }
        console.log(this.state.items);
    }

    render() {
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
            ],
        };
        const pagination= {
                current: 1,
                pageSize: 10,
            }
        return (
            <div >
                <div>
                    <Search
                        placeholder="input tasks"
                        enterButton="Add"
                        size="large"
                        onSearch={value => this.addItem(value)}
                    />
                </div>
                <Table  rowSelection={rowSelection}
                        columns={columns}
                        dataSource={this.state.items}
                        pagenatipon={pagination}
                />
            </div>
        );
    }
}
    export default App;

自定义

好了,现在可以删掉我们的TodoItems.js这个文件了,因为我们用antd组件替代了它,我们可以使用antd的样式,如果你有自己喜欢的样式,可以自行查找覆盖antd样式的方法。我们这里稍微修饰一下,打开App.css文件

@import '~antd/dist/antd.css';
.ant-input-search{
    width:300px
}
.ant-table{
    margin-top: 10px;
    width: 500px;
}

清空输入框

  等等,现在还有一个问题,当我们按完添加按钮之后,我们的task确实已经添加进去了,但是我们的input框内的值并没有被情况,这样导致我们需要输入下一个task的时候我们需要手动删除它,再重新输入,这样显得有点麻烦,官方有一个方案,就是allowClear,这样输入框末端会有一个清除的符号,但是这还是很麻烦,所以我们想想之前用过的一个refs,怎么用呢?我们要新建一个ref,在Search标签内定义一个ref={this.inputRef},在constructor里定义这个方法this.inputRef=React.createRef(),在addItem函数的末尾清空这个ref的valuethis.inputRef.current.state.value='',这样就可以啦!

完整代码

import React, { Component } from "react";
import { Input, Table} from 'antd';
import "./App.css"
const { Search } = Input;
const columns = [
    {
        title: 'Task',
        dataIndex: 'text',
    }
];

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            selectedRowKeys: []
        };
        this.addItem = this.addItem.bind(this);
        this.inputRef=React.createRef()
    }

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    addItem(text) {
        if (text !== "") {
            var newItem = {
                text,
                key: Date.now()
            };

            this.setState((prevState) => {
                return {
                    items: prevState.items.concat(newItem)
                };
            });
        }
        this.inputRef.current.state.value=''
    }

    render() {
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
            ],
        };
        const pagination= {
                current: 1,
                pageSize: 10,
            }
        return (
            <div >
                <div style={{textAlign: "center"}}>
                    <Search
                        ref={this.inputRef}
                        placeholder="input tasks"
                        enterButton="Add"
                        size="large"
                        allowClear
                        onSearch={(value) => {this.addItem(value)}}
                    />
                </div>
                <div>
                <Table  rowSelection={rowSelection}
                        columns={columns}
                        dataSource={this.state.items}
                        pagenatipon={pagination}
                />
                </div>
            </div>
        );
    }
}
    export default App;

  当然这还只是刚开始,我们大概知道了ReactJS以及antd组件库的使用方法,接下来我们还要实现编辑和删除功能,大家或许可以去看看antd官方组件库并尝试自己先实现一下这两个功能

 类似资料: