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