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