{"id":157,"date":"2019-02-10T23:27:22","date_gmt":"2019-02-10T15:27:22","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=157"},"modified":"2020-06-20T23:15:01","modified_gmt":"2020-06-20T15:15:01","slug":"react-ant-design","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2019\/02\/10\/react-ant-design\/","title":{"rendered":"REACT & ANT Design"},"content":{"rendered":"
\n

\n Ant Design\u662f\u4e00\u4e2aReact UI\u5e93\uff0c\u5b83\u5305\u542b\u5927\u91cf\u5df2\u7ecf\u5c01\u88c5\u597d\u7684\u5e38\u7528\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6784\u5efa\u73b0\u4ee3\u4f18\u96c5\u7684\u7528\u6237\u754c\u9762\u3002\n<\/p><\/blockquote>\n

ant Design\u7531\u963f\u91cc\u5df4\u5df4\u524d\u7aef\u7ec4\u521b\u5efa\uff0c\u5df2\u7ecf\u88ab\u5f88\u591a\u77e5\u540d\u4f01\u4e1a\u4f7f\u7528\uff1a\u817e\u8baf\uff0c\u767e\u5ea6\u7b49\u3002<\/p>\n

\u8fd8\u6709\u4e00\u4e2amobile\u7248\u7684Ant Design\uff0c\u70b9\u51fbmobile Ant Design<\/a>\u67e5\u9605\u3002<\/p>\n

\u5b89\u88c5<\/h4>\n

\u8fd9\u91cc\u6211\u5c06\u4f7f\u7528create-react-app\u6f14\u793atodolist\u793a\u4f8b\u3002<\/p>\n

\u5b89\u88c5antd\u4f9d\u8d56\uff1a<\/p>\n

$ npm install antd --save\n    or\n$ yarn add antd\n<\/code><\/pre>\n
\u5728\u6839\u7ec4\u4ef6\u4e2d\u5bfc\u5165\uff1a<\/p>\n
import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Todo from \".\/todo\";\n\nimport \".\/styles.css\";\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Todo \/>\n    <\/div>\n  );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(<App \/>, rootElement);\n<\/code><\/pre>\n
TODO\u7ec4\u4ef6<\/h4>\n
\u5f00\u59cb\u6784\u5efa\u7ec4\u4ef6\uff1a<\/p>\n
import React from \"react\";\n\nexport default class Todo extends React.Component {\n  render() {\n    return (\n      <div className=\"todoContainer\">\n        <h1>TODO List<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
css\u6837\u5f0f\uff1a<\/p>\n
.App {\n  font-family: sans-serif;\n  text-align: center;\n  .todoContainer {\n    width: 75%;\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n<\/code><\/pre>\n
\u7ed9\u7ec4\u4ef6\u589e\u52a0\u4e00\u4e2a\u8f93\u5165\u6846\u3002\u5bfc\u5165antd\u7684CSS\u6587\u4ef6\uff1a<\/p>\n
import React from \"react\";\nimport { Input } from \"antd\";\nimport \"antd\/dist\/antd.css\";\n\nexport default class Todo extends React.Component {\n  render() {\n    return (\n      <div className=\"todoContainer\" \/>\n        <h1>TODO List<\/h1>\n\n        <Input\n          placeholder=\"\u4f60\u60f3\u5e72\u70b9\u5565?\"\n        \/>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
\u73b0\u5728\u663e\u793a\u4e86\u4e00\u4e2a\u6587\u672c\u8f93\u5165\u6846\u3002\u9700\u8981\u628a\u8f93\u5165\u7684\u5185\u5bb9\u7ed9\u7ec4\u4ef6\u7684state\uff0c\u8fd9\u91cc\u4f7f\u7528\u6211\u4eec\u7684onPressEnter\u6765\u68c0\u6d4b\u7528\u6237\u63d0\u4ea4\u7684\u65b0list\uff1a<\/p>\n
export default class Todo extends React.Component {\n  constructor() {\n    super();\n\n    this.state = {\n      todos: []\n    };\n  }\n\n  handlePressEnter = e => {\n    const todo = {\n      index: this.state.todos.length,\n      content: e.target.value\n    };\n\n    const newTodos = this.state.todos.concat(todo);\n\n    this.setState({\n      todos: newTodos\n    });\n\n    e.target.value = \"\";\n  };\n\n  render() {\n    return (\n      <div className=\"todoContainer\">\n        <h1>TODO List<\/h1>\n\n        <Input\n          placeholder=\"\u4f60\u60f3\u5e72\u70b9\u5565?\"\n          onPressEnter={this.handlePressEnter}\n        \/>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
\u53ea\u8981\u7528\u6237\u8f93\u5165\u65b0\u7684\u5185\u5bb9\uff0c\u5c31\u4f1a\u66f4\u65b0\u7ec4\u4ef6\u7684\u72b6\u6001\uff0c\u4f46\u7ec4\u4ef6\u5e76\u6ca1\u6709\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n
\u53ef\u4ee5\u4f7f\u7528Ant Design\u7684\u7ec4\u4ef6\u3002\u5b83\u7684dataSourceprop\u63a5\u53d7\u6570\u7ec4\u6570\u636e\uff0c\u5e76\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6:<\/p>\n
import React from \"react\";\nimport { Input, List } from \"antd\";\n\nimport \"antd\/dist\/antd.css\";\n\nexport default class Todo extends React.Component {\n\n  render() {\n    return (\n      <div className=\"todoContainer\">\n        <h1>TODO List<\/h1>\n\n        <Input\n          placeholder=\"\u4f60\u60f3\u5e72\u70b9\u5565?\"\n          onPressEnter={this.handlePressEnter}\n        \/>\n\n        <List\n          locale={{ emptyText: \"\u8fd9\u91cc\u7a7a\u7a7a\u5982\u4e5f\" }}\n          dataSource={this.state.todos}\n          renderItem={item => (\n            <List.Item>{item.content}<\/List.Item>\n          )}\n        \/>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
\u8fd9\u6837\u4e00\u4e2a\u57fa\u672ctodolist\u5c31\u53ef\u4ee5\u8fd0\u884c\u4e86\u3002<\/p>\n
\u5b8c\u5584<\/h4>\n
\u4e3a\u4e86\u907f\u514d\u7ec4\u4ef6\u8fc7\u4e8e\u590d\u6742\uff0c\u628aitem\u63d0\u53d6\u6210<List.Item \/>\u7ec4\u4ef6\u3002\u589e\u52a0removeTodo()\u6765\u5220\u9664item\u3002<\/p>\n
\u8fd9\u91cc\u4f7f\u7528Ant Design\u7684\u7ec4\u4ef6\u6a21\u62df\u5220\u9664\u6309\u94ae\u3002\u5173\u4e8e\u7ec4\u4ef6\u53ca\u76f8\u5173\u7ec4\u4ef6\uff0c\u8bf7\u67e5\u9605Ant Design<\/a>\u3002<\/p>\n
import React from \"react\";\nimport { Input, List, Icon } from \"antd\";\n\nimport \"antd\/dist\/antd.css\";\n\nexport default class Todo extends React.Component {\n\n  removeTodo = index => {\n    let newTodos = [...this.state.todos];\n\n    newTodos.splice(index, 1);\n\n    for (let i = index; i < newTodos.length; i++) {\n      newTodos[i].index -= 1;\n    }\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  render() {\n    return (\n      <div className=\"todoContainer\">\n        <h1>TODO List<\/h1>\n\n        <Input\n          placeholder=\"\u4f60\u60f3\u5e72\u70b9\u5565?\"\n          onPressEnter={this.handlePressEnter}\n        \/>\n\n        <List\n          locale={{ emptyText: \"\u8fd9\u91cc\u7a7a\u7a7a\u5982\u4e5f\" }}\n          dataSource={this.state.todos}\n          renderItem={item => (\n            <TodoItem\n              todo={item}\n              removeTodo={this.removeTodo}\n            \/>\n          )}\n        \/>\n      <\/div>\n    );\n  }\n}\n\nclass TodoItem extends React.Component {\n  remove = () => {\n    this.props.removeTodo(this.props.todo.index);\n  };\n\n  render() {\n    return (\n      <List.Item\n        actions={[\n          <Icon\n            type=\"close-circle\"\n            theme=\"filled\"\n            onClick={this.remove}\n          \/>\n        ]}\n      >\n        {this.props.todo.content}\n      <\/List.Item>\n    );\n  }\n}\n<\/code><\/pre>\n
\u63a5\u7740\uff0c\u6dfb\u52a0Ant Design\u7684\u7ec4\u4ef6\u3002\u5e76\u901a\u8fc7setDate()\u65b9\u6cd5\u6765\u66f4\u65b0\u8fd9\u4e9b\u6570\u636e\u3002<\/p>\n
import React from \"react\";\nimport { Input, List, Icon, DatePicker } from \"antd\";\n\nimport \"antd\/dist\/antd.css\";\n\nexport default class Todo extends React.Component {\n\n  handlePressEnter = e => {\n    const todo = {\n      index: this.state.todos.length,\n      content: e.target.value,\n      date: null,\n      dateString: \"\"\n    };\n\n    const newTodos = this.state.todos.concat(todo);\n\n    this.setState({\n      todos: newTodos\n    });\n\n    e.target.value = \"\";\n  };\n\n  setDate = (index, date, dateString) => {\n    let newTodos = [...this.state.todos];\n    newTodos[index].date = date;\n    newTodos[index].dateString = dateString;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  render() {\n    return (\n      <div className=\"todoContainer\">\n        <h1>TODO List<\/h1>\n\n        <Input\n          placeholder=\"\u4f60\u60f3\u5e72\u70b9\u5565?\"\n          onPressEnter={this.handlePressEnter}\n        \/>\n\n        <List\n          locale={{ emptyText: \"\u8fd9\u91cc\u7a7a\u7a7a\u5982\u4e5f\" }}\n          dataSource={this.state.todos}\n          renderItem={item => (\n            <TodoItem\n              todo={item}\n              removeTodo={this.removeTodo}\n              setDate={this.setDate}\n            \/>\n          )}\n        \/>\n      <\/div>\n    );\n  }\n}\n\nclass TodoItem extends React.Component {\n  remove = () => {\n    this.props.removeTodo(this.props.todo.index);\n  };\n\n  handleDateChange = (date, dateString) => {\n    this.props.setDate(this.props.todo.index, date, dateString);\n  }\n\n  render() {\n    return (\n      <List.Item\n        actions={[\n          <DatePicker\n            format=\"MM\/DD\/YYYY\"\n            onChange={this.handleDateChange}\n            value={this.props.todo.date}\n          \/>,\n          <Icon\n            type=\"close-circle\"\n            theme=\"filled\"\n            onClick={this.remove}\n          \/>\n        ]}\n      >\n        {this.props.todo.content}\n      <\/List.Item>\n    );\n  }\n}\n<\/code><\/pre>\n
🎉\u53ef\u4ee5\u7528\u4e86\u3002<\/p>\n
\u5982\u679c\u60a8\u60f3\u4e86\u89e3\u6709\u5173Ant Design\u7684\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u67e5\u770b\u6587\u6863<\/a>\u3002<\/p>\n\n
code enjoy! 🤪🤪🤪<\/p>\n
\u4f5c\u8005\uff1aindeex<\/p>\n
\u94fe\u63a5\uff1ahttps:\/\/indeex.cc<\/a><\/p>\n
\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n
\n","protected":false},"excerpt":{"rendered":"
Ant Design\u662f\u4e00\u4e2aReact UI\u5e93\uff0c\u5b83\u5305\u542b\u5927\u91cf\u5df2\u7ecf\u5c01\u88c5\u597d\u7684\u5e38\u7528\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6784\u5efa\u73b0\u4ee3\u4f18\u96c5\u7684\u7528\u6237Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/157"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/157\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}