ant-design/components/comment/demo/editor.md

112 lines
2.3 KiB
Markdown
Raw Normal View History

2018-10-25 21:32:29 +08:00
---
order: 3
title:
2018-12-04 16:51:13 +08:00
zh-CN: 回复框
en-US: Reply Editor
2018-10-25 21:32:29 +08:00
---
## zh-CN
2018-10-28 22:09:38 +08:00
评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。
2018-10-25 21:32:29 +08:00
## en-US
2019-04-20 06:35:29 +08:00
Comment can be used as an editor, so the user can customize the contents of the component.
2018-10-25 21:32:29 +08:00
2019-05-07 14:57:32 +08:00
```jsx
import { Comment, Avatar, Form, Button, List, Input } from 'antd';
2018-10-25 21:32:29 +08:00
import moment from 'moment';
const { TextArea } = Input;
2018-10-25 21:32:29 +08:00
2018-12-01 00:24:16 +08:00
const CommentList = ({ comments }) => (
<List
dataSource={comments}
header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
itemLayout="horizontal"
renderItem={props => <Comment {...props} />}
/>
);
2018-10-25 21:32:29 +08:00
2019-05-07 14:57:32 +08:00
const Editor = ({ onChange, onSubmit, submitting, value }) => (
<>
2018-12-04 16:51:13 +08:00
<Form.Item>
2018-12-01 00:24:16 +08:00
<TextArea rows={4} onChange={onChange} value={value} />
2018-12-04 16:51:13 +08:00
</Form.Item>
<Form.Item>
2019-05-07 14:57:32 +08:00
<Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
2018-12-01 00:24:16 +08:00
Add Comment
</Button>
2018-12-04 16:51:13 +08:00
</Form.Item>
</>
2018-12-01 00:24:16 +08:00
);
2018-10-25 21:32:29 +08:00
class App extends React.Component {
state = {
comments: [],
submitting: false,
2018-11-02 18:17:28 +08:00
value: '',
2019-05-07 14:57:32 +08:00
};
2018-10-25 21:32:29 +08:00
2018-11-02 18:17:28 +08:00
handleSubmit = () => {
2018-11-02 22:52:35 +08:00
if (!this.state.value) {
return;
}
2018-10-25 21:32:29 +08:00
this.setState({
submitting: true,
});
setTimeout(() => {
this.setState({
submitting: false,
2018-11-02 18:17:28 +08:00
value: '',
2018-10-25 21:32:29 +08:00
comments: [
...this.state.comments,
2018-10-25 21:32:29 +08:00
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
content: <p>{this.state.value}</p>,
2018-10-30 00:17:26 +08:00
datetime: moment().fromNow(),
2018-10-25 21:32:29 +08:00
},
2018-10-31 20:10:42 +08:00
],
2018-10-30 19:25:54 +08:00
});
2018-10-25 21:32:29 +08:00
}, 1000);
2019-05-07 14:57:32 +08:00
};
2018-10-25 21:32:29 +08:00
2019-05-07 14:57:32 +08:00
handleChange = e => {
2018-11-02 18:17:28 +08:00
this.setState({
value: e.target.value,
});
2019-05-07 14:57:32 +08:00
};
2018-11-02 18:17:28 +08:00
2018-10-25 21:32:29 +08:00
render() {
2018-11-02 18:17:28 +08:00
const { comments, submitting, value } = this.state;
2018-10-25 21:32:29 +08:00
return (
<>
2018-11-02 18:17:28 +08:00
{comments.length > 0 && <CommentList comments={comments} />}
<Comment
2019-05-07 14:57:32 +08:00
avatar={
2018-10-25 21:32:29 +08:00
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
2019-05-07 14:57:32 +08:00
}
content={
2018-11-02 18:17:28 +08:00
<Editor
onChange={this.handleChange}
onSubmit={this.handleSubmit}
2018-11-02 18:17:28 +08:00
submitting={submitting}
value={value}
/>
2019-05-07 14:57:32 +08:00
}
/>
</>
2018-10-25 21:32:29 +08:00
);
}
}
ReactDOM.render(<App />, mountNode);
2019-05-07 14:57:32 +08:00
```