mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
5cf579c37a
* docs(badge): replace class component with hooks * docs(button): replace class component with hooks * docs(calendar): replace class component with hooks * docs(card): replace class component with hooks * docs(button): replace class component with hooks * chore(deps): remove webpack devDependencies * docs(cascader): replace class component with hooks * docs(checkbox): replace class component with hooks * docs(collapse): replace class component with hooks * docs(comment): replace class component with hooks * docs(descriptions): replace class component with hooks
103 lines
2.1 KiB
Markdown
103 lines
2.1 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 回复框
|
|
en-US: Reply Editor
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。
|
|
|
|
## en-US
|
|
|
|
Comment can be used as an editor, so the user can customize the contents of the component.
|
|
|
|
```jsx
|
|
import { Comment, Avatar, Form, Button, List, Input } from 'antd';
|
|
import moment from 'moment';
|
|
|
|
const { TextArea } = Input;
|
|
|
|
const CommentList = ({ comments }) => (
|
|
<List
|
|
dataSource={comments}
|
|
header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
|
|
itemLayout="horizontal"
|
|
renderItem={props => <Comment {...props} />}
|
|
/>
|
|
);
|
|
|
|
const Editor = ({ onChange, onSubmit, submitting, value }) => (
|
|
<>
|
|
<Form.Item>
|
|
<TextArea rows={4} onChange={onChange} value={value} />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
|
|
Add Comment
|
|
</Button>
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
|
|
export default () => {
|
|
const [state, setState] = React.useState({
|
|
comments: [],
|
|
submitting: false,
|
|
value: '',
|
|
});
|
|
|
|
const handleSubmit = () => {
|
|
if (!state.value) {
|
|
return;
|
|
}
|
|
|
|
setState({
|
|
...state,
|
|
submitting: true,
|
|
});
|
|
|
|
setTimeout(() => {
|
|
setState({
|
|
submitting: false,
|
|
value: '',
|
|
comments: [
|
|
...state.comments,
|
|
{
|
|
author: 'Han Solo',
|
|
avatar: 'https://joeschmoe.io/api/v1/random',
|
|
content: <p>{state.value}</p>,
|
|
datetime: moment().fromNow(),
|
|
},
|
|
],
|
|
});
|
|
}, 1000);
|
|
};
|
|
|
|
const handleChange = e => {
|
|
setState({
|
|
...state,
|
|
value: e.target.value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{state.comments.length > 0 && <CommentList comments={state.comments} />}
|
|
<Comment
|
|
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
|
|
content={
|
|
<Editor
|
|
onChange={handleChange}
|
|
onSubmit={handleSubmit}
|
|
submitting={state.submitting}
|
|
value={state.value}
|
|
/>
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
```
|