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';
|
|
|
|
|
2019-05-27 21:32:45 +08:00
|
|
|
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 }) => (
|
2020-05-25 16:27:02 +08:00
|
|
|
<>
|
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>
|
2020-05-25 16:27:02 +08:00
|
|
|
</>
|
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: [
|
2021-01-31 13:42:52 +08:00
|
|
|
...this.state.comments,
|
2018-10-25 21:32:29 +08:00
|
|
|
{
|
|
|
|
author: 'Han Solo',
|
|
|
|
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
2018-12-04 17:05:20 +08:00
|
|
|
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 (
|
2020-05-25 16:27:02 +08:00
|
|
|
<>
|
2018-11-02 18:17:28 +08:00
|
|
|
{comments.length > 0 && <CommentList comments={comments} />}
|
2018-10-29 22:05:42 +08:00
|
|
|
<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}
|
2018-10-29 00:26:13 +08:00
|
|
|
onSubmit={this.handleSubmit}
|
2018-11-02 18:17:28 +08:00
|
|
|
submitting={submitting}
|
|
|
|
value={value}
|
2018-10-29 00:26:13 +08:00
|
|
|
/>
|
2019-05-07 14:57:32 +08:00
|
|
|
}
|
2018-10-29 00:26:13 +08:00
|
|
|
/>
|
2020-05-25 16:27:02 +08:00
|
|
|
</>
|
2018-10-25 21:32:29 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|