REACT & ANT Design

Ant Design是一个React UI库，它包含大量已经封装好的常用组件，用于构建现代优雅的用户界面。

ant Design由阿里巴巴前端组创建，已经被很多知名企业使用：腾讯，百度等。

还有一个mobile版的Ant Design，点击mobile Ant Design查阅。

安装

这里我将使用create-react-app演示todolist示例。

安装antd依赖：

$ npm install antd --save
    or
$ yarn add antd

在根组件中导入：

import React from "react";
import ReactDOM from "react-dom";
import Todo from "./todo";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Todo />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

TODO组件

开始构建组件：

import React from "react";

export default class Todo extends React.Component {
  render() {
    return (
      <div className="todoContainer">
        <h1>TODO List</h1>
      </div>
    );
  }
}

css样式：

.App {
  font-family: sans-serif;
  text-align: center;
  .todoContainer {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

给组件增加一个输入框。导入antd的CSS文件：

import React from "react";
import { Input } from "antd";
import "antd/dist/antd.css";

export default class Todo extends React.Component {
  render() {
    return (
      <div className="todoContainer" />
        <h1>TODO List</h1>

        <Input
          placeholder="你想干点啥?"
        />
      </div>
    );
  }
}

现在显示了一个文本输入框。需要把输入的内容给组件的state，这里使用我们的onPressEnter来检测用户提交的新list：

export default class Todo extends React.Component {
  constructor() {
    super();

    this.state = {
      todos: []
    };
  }

  handlePressEnter = e => {
    const todo = {
      index: this.state.todos.length,
      content: e.target.value
    };

    const newTodos = this.state.todos.concat(todo);

    this.setState({
      todos: newTodos
    });

    e.target.value = "";
  };

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO List</h1>

        <Input
          placeholder="你想干点啥?"
          onPressEnter={this.handlePressEnter}
        />
      </div>
    );
  }
}

只要用户输入新的内容，就会更新组件的状态，但组件并没有重新渲染。

可以使用Ant Design的组件。它的dataSourceprop接受数组数据，并重新渲染组件:

import React from "react";
import { Input, List } from "antd";

import "antd/dist/antd.css";

export default class Todo extends React.Component {

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO List</h1>

        <Input
          placeholder="你想干点啥?"
          onPressEnter={this.handlePressEnter}
        />

        <List
          locale={{ emptyText: "这里空空如也" }}
          dataSource={this.state.todos}
          renderItem={item => (
            <List.Item>{item.content}</List.Item>
          )}
        />
      </div>
    );
  }
}

这样一个基本todolist就可以运行了。

完善

为了避免组件过于复杂，把item提取成<List.Item />组件。增加removeTodo()来删除item。

这里使用Ant Design的组件模拟删除按钮。关于组件及相关组件，请查阅Ant Design。

import React from "react";
import { Input, List, Icon } from "antd";

import "antd/dist/antd.css";

export default class Todo extends React.Component {

  removeTodo = index => {
    let newTodos = [...this.state.todos];

    newTodos.splice(index, 1);

    for (let i = index; i < newTodos.length; i++) {
      newTodos[i].index -= 1;
    }

    this.setState({
      todos: newTodos
    });
  };

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO List</h1>

        <Input
          placeholder="你想干点啥?"
          onPressEnter={this.handlePressEnter}
        />

        <List
          locale={{ emptyText: "这里空空如也" }}
          dataSource={this.state.todos}
          renderItem={item => (
            <TodoItem
              todo={item}
              removeTodo={this.removeTodo}
            />
          )}
        />
      </div>
    );
  }
}

class TodoItem extends React.Component {
  remove = () => {
    this.props.removeTodo(this.props.todo.index);
  };

  render() {
    return (
      <List.Item
        actions={[
          <Icon
            type="close-circle"
            theme="filled"
            onClick={this.remove}
          />
        ]}
      >
        {this.props.todo.content}
      </List.Item>
    );
  }
}

接着，添加Ant Design的组件。并通过setDate()方法来更新这些数据。

import React from "react";
import { Input, List, Icon, DatePicker } from "antd";

import "antd/dist/antd.css";

export default class Todo extends React.Component {

  handlePressEnter = e => {
    const todo = {
      index: this.state.todos.length,
      content: e.target.value,
      date: null,
      dateString: ""
    };

    const newTodos = this.state.todos.concat(todo);

    this.setState({
      todos: newTodos
    });

    e.target.value = "";
  };

  setDate = (index, date, dateString) => {
    let newTodos = [...this.state.todos];
    newTodos[index].date = date;
    newTodos[index].dateString = dateString;

    this.setState({
      todos: newTodos
    });
  };

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO List</h1>

        <Input
          placeholder="你想干点啥?"
          onPressEnter={this.handlePressEnter}
        />

        <List
          locale={{ emptyText: "这里空空如也" }}
          dataSource={this.state.todos}
          renderItem={item => (
            <TodoItem
              todo={item}
              removeTodo={this.removeTodo}
              setDate={this.setDate}
            />
          )}
        />
      </div>
    );
  }
}

class TodoItem extends React.Component {
  remove = () => {
    this.props.removeTodo(this.props.todo.index);
  };

  handleDateChange = (date, dateString) => {
    this.props.setDate(this.props.todo.index, date, dateString);
  }

  render() {
    return (
      <List.Item
        actions={[
          <DatePicker
            format="MM/DD/YYYY"
            onChange={this.handleDateChange}
            value={this.props.todo.date}
          />,
          <Icon
            type="close-circle"
            theme="filled"
            onClick={this.remove}
          />
        ]}
      >
        {this.props.todo.content}
      </List.Item>
    );
  }
}

🎉可以用了。

如果您想了解有关Ant Design的更多信息，请查看文档。

code enjoy! 🤪🤪🤪

作者：indeex

链接：https://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。