从零开始学习ReactJS（三）--antd的使用

美化界面

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官方组件库并尝试自己先实现一下这两个功能