diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 844668f288..f573ec511b 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -36,18 +36,19 @@ const columns = [{ dataIndex: 'age', }]; -const Page = React.createClass({ - getInitialState() { - return { +class Page extends React.Component { + constructor() { + super(); + this.state = { visible: false, }; - }, - showModal() { + } + showModal = () => { this.setState({ visible: true }); - }, - hideModal() { + } + hideModal = () => { this.setState({ visible: false }); - }, + } render() { const info = () => { Modal.info({ @@ -102,16 +103,17 @@ const Page = React.createClass({ ); - }, -}); + } +} -const App = React.createClass({ - getInitialState() { - return { +class App extends React.Component { + constructor() { + super(); + this.state = { locale: enUS, }; - }, - changeLocale(e) { + } + changeLocale = (e) => { const localeValue = e.target.value; this.setState({ locale: localeValue }); if (!localeValue) { @@ -119,7 +121,7 @@ const App = React.createClass({ } else { moment.locale('en'); } - }, + } render() { return (
@@ -133,8 +135,8 @@ const App = React.createClass({
); - }, -}); + } +} ReactDOM.render(, mountNode); ```` diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md index dc0dc465e5..69e9a6d0bd 100644 --- a/components/mention/demo/async.md +++ b/components/mention/demo/async.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 异步加载 en-US: Asynchronous loading --- @@ -17,19 +17,21 @@ async import { Mention } from 'antd'; const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']; -const AsyncMention = React.createClass({ - getInitialState() { - return { + +class AsyncMention extends React.Component { + constructor() { + super(); + this.state = { suggestions: [], loading: false, }; - }, + } fetchSuggestions(value, callback) { setTimeout(() => { callback(users.filter(item => item.indexOf(value) !== -1)); }, 500); - }, - onSearchChange(value) { + } + onSearchChange = (value) => { this.fetchSuggestions(value, (suggestions) => { this.setState({ suggestions, @@ -39,7 +41,7 @@ const AsyncMention = React.createClass({ this.setState({ loading: true, }); - }, + } render() { const { suggestions, loading } = this.state; return ( @@ -50,11 +52,8 @@ const AsyncMention = React.createClass({ onSearchChange={this.onSearchChange} /> ); - }, -}); + } +} -ReactDOM.render( - , - mountNode -); +ReactDOM.render(, mountNode); ```` diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md index b9d2978a63..82ae6757b6 100644 --- a/components/mention/demo/avatar.md +++ b/components/mention/demo/avatar.md @@ -1,6 +1,6 @@ --- order: 3 -title: +title: zh-CN: 头像 en-US: Icon Image --- @@ -26,18 +26,18 @@ const webFrameworks = [ { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' }, ]; -const CustomNavMention = React.createClass({ - getInitialState() { - return { +class CustomNavMention extends React.Component { + constructor() { + super(); + this.state = { suggestions: [], }; - }, - onSearchChange(value) { + } + onSearchChange = (value) => { const searchValue = value.toLowerCase(); const filtered = webFrameworks.filter(item => item.name.toLowerCase().indexOf(searchValue) !== -1 ); - const suggestions = filtered.map(suggestion => ); - this.setState({ - suggestions, - }); - }, + this.setState({ suggestions }); + } render() { const { suggestions } = this.state; return ( @@ -58,11 +56,8 @@ const CustomNavMention = React.createClass({ onSearchChange={this.onSearchChange} /> ); - }, -}); + } +} -ReactDOM.render( - , - mountNode -); +ReactDOM.render(, mountNode); ```` diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md index 721b04eaa9..8238a3a20b 100644 --- a/components/mention/demo/controllder-simple.md +++ b/components/mention/demo/controllder-simple.md @@ -17,23 +17,26 @@ Controlled mode. import { Mention } from 'antd'; const { toEditorState } = Mention; -const App = React.createClass({ - getInitialState() { - return { +class App extends React.Component { + constructor() { + super(); + this.state = { value: toEditorState('@afc163'), }; - }, - handleChange(editorState) { + } + handleChange = (editorState) => { this.setState({ value: editorState, }); - }, + } render() { - return (); + return ( + + ); }, }); diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md index 3c8f2a9359..0de4c44b74 100644 --- a/components/mention/demo/controlled.md +++ b/components/mention/demo/controlled.md @@ -7,28 +7,29 @@ title: ## zh-CN -受控模式，例如配合 Form 使用 +受控模式，例如配合 Form 使用。 ## en-US -Controlled mode, for example, to work with `Form` . +Controlled mode, for example, to work with `Form`. ````jsx import { Mention, Form, Button } from 'antd'; const { toEditorState, getMentions } = Mention; const FormItem = Form.Item; -let App = React.createClass({ - getInitialState() { - return { +class App extends React.Component { + constructor() { + super(); + this.state = { initValue: toEditorState('@afc163'), }; - }, - handleReset(e) { + } + handleReset = (e) => { e.preventDefault(); this.props.form.resetFields(); - }, - handleSubmit(e) { + } + handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((errors, values) => { if (errors) { @@ -38,8 +39,8 @@ let App = React.createClass({ console.log('Submit!!!'); console.log(values); }); - }, - checkMention(rule, value, callback) { + } + checkMention = (rule, value, callback) => { const { getFieldValue } = this.props.form; const mentions = getMentions(getFieldValue('mention')); if (mentions.length < 2) { @@ -47,7 +48,7 @@ let App = React.createClass({ } else { callback(); } - }, + } render() { const { getFieldDecorator, getFieldValue } = this.props.form; console.log('>> render', getFieldValue('mention') === this.state.initValue); @@ -77,8 +78,8 @@ let App = React.createClass({ ); - }, -}); + } +} App = Form.create()(App); diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index b80f3148dc..85805c92bf 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -1,6 +1,6 @@ --- order: 2 -title: +title: zh-CN: 自定义建议 en-US: Customize Suggestion --- @@ -30,23 +30,25 @@ const webFrameworks = [ function onSelect(suggestion, data) { console.log('onSelect', suggestion, data); } -const CustomNavMention = React.createClass({ - getInitialState() { - return { + +class CustomNavMention extends React.Component { + constructor() { + super(); + this.state = { suggestions: [], }; - }, - onSearchChange(value) { + } + onSearchChange = (value) => { const searchValue = value.toLowerCase(); const filtered = webFrameworks.filter(item => item.name.toLowerCase().indexOf(searchValue) !== -1 ); const suggestions = filtered.map(suggestion => ); this.setState({ suggestions }); - }, + } render() { const { suggestions } = this.state; return ( @@ -58,11 +60,8 @@ const CustomNavMention = React.createClass({ onSelect={onSelect} /> ); - }, -}); + } +} -ReactDOM.render( - , - mountNode -); +ReactDOM.render(, mountNode); ```` diff --git a/components/mention/demo/popupContainer.md b/components/mention/demo/popupContainer.md index b69fe9e531..456683a4e4 100644 --- a/components/mention/demo/popupContainer.md +++ b/components/mention/demo/popupContainer.md @@ -25,23 +25,28 @@ function onSelect(suggestion) { console.log('onSelect', suggestion); } -const PopoverContainer = React.createClass({ - getSuggestionContainer() { +class PopoverContainer extends React.Component { + getSuggestionContainer = () => { return this.popover.getPopupDomNode(); - }, + } render() { - const mention = (); - return ( this.popover = popover}> - - ); - }, -}); + const mention = ( + + ); + return ( + this.popover = popover}> + + + ); + } +} + ReactDOM.render(, mountNode); ````