mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
2.4 KiB
2.4 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。
en-US
Comment can be used as editor, user can customize the editor component.
import {
Comment, Avatar, Form, Button, List, Input,
} from 'antd';
import moment from 'moment';
const TextArea = Input.TextArea;
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,
}) => (
<div>
<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>
</div>
);
class App extends React.Component {
state = {
comments: [],
submitting: false,
value: '',
}
handleSubmit = () => {
if (!this.state.value) {
return;
}
this.setState({
submitting: true,
});
setTimeout(() => {
this.setState({
submitting: false,
value: '',
comments: [
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
content: <p>{this.state.value}</p>,
datetime: moment().fromNow(),
},
...this.state.comments,
],
});
}, 1000);
}
handleChange = (e) => {
this.setState({
value: e.target.value,
});
}
render() {
const { comments, submitting, value } = this.state;
return (
<div>
{comments.length > 0 && <CommentList comments={comments} />}
<Comment
avatar={(
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
)}
content={(
<Editor
onChange={this.handleChange}
onSubmit={this.handleSubmit}
submitting={submitting}
value={value}
/>
)}
/>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);