React Ant 设计标签点击并显示到文本区域

Question

我正在为 Ant design,

使用我的 React TypeScript 项目

这是我的冲突，我想点击标签并将其显示到文本区域，所以当我输入文本然后点击标签时，接下来输入文本并点击标签，

有人知道解决方案吗？

谢谢

代码在这里

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Comment, Avatar, Form, Button, List, Input,Tag } 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>
  </>
);

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: [
          ...this.state.comments,
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: <p>{this.state.value}</p>,
            datetime: moment().fromNow(),
          },
        ],
      });
    }, 1000);
  };

  handleChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const { comments, submitting, value } = this.state;

    return (
      <>

       <div>
      <Tag color="magenta">magenta</Tag>
      <Tag color="red">red</Tag>
      <Tag color="volcano">volcano</Tag>
      <Tag color="orange">orange</Tag>
      <Tag color="gold">gold</Tag>
      <Tag color="lime">lime</Tag>
      <Tag color="green">green</Tag>
      <Tag color="cyan">cyan</Tag>
      <Tag color="blue">blue</Tag>
      <Tag color="geekblue">geekblue</Tag>
      <Tag color="purple">purple</Tag>
    </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}
            />
          }
        />
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Answer 1

您需要将点击处理程序添加到 Tag 并且每当它被点击时您将其值附加到 textarea :

addTag = e => {
  const txt = e.target.innerHTML;

  this.setState(prevState => ({
    ...prevState,
    value: `${prevState.value} <${txt}> `,
  }));
}


<Tag onClick={this.addTag} color="magenta">First Name</Tag>
<Tag onClick={this.addTag} color="red">Last Name</Tag>
<Tag onClick={this.addTag} color="volcano">NIC</Tag>
<Tag onClick={this.addTag} color="orange">FAX</Tag>

https://stackblitz.com/edit/react-pqp2iu-jtqgvf?file=index.js

Answer 2

是的，正如 Taki 已经提到的，您必须在标签上附加事件侦听器以侦听点击事件，然后相应地处理该点击事件。

或者，如果您还想在标签上绑定一些数据，那么您可以在 html 元素上使用 data- 属性。阅读 using data attributes.

        <div>
          <Tag color="magenta" data-value="John" onClick={this.onTagClick}>
            First Name
          </Tag>
          <Tag color="red" data-value="Cena" onClick={this.onTagClick}>
            Last Name
          </Tag>
          <Tag color="volcano" data-value="123123" onClick={this.onTagClick}>
            NIC
          </Tag>
          <Tag color="orange" data-value="999999" onClick={this.onTagClick}>
            FAX
          </Tag>
        </div>

  onTagClick = e => {
    const dataValue = e.target.dataset.value;
    this.setState(previousState => ({
      value: previousState.value.concat(dataValue)
    }));
  };

https://stackblitz.com/edit/react-pqp2iu-ehjkvr?file=index.js

React Ant 设计标签点击并显示到文本区域

React Ant design tag click and showing to text area

reactjs

antd

react-typescript