Reactjs 如何使用react在表单输入中添加可单击的组件图标

我想集成一个giy选项作为评论表单的一部分，这是我到目前为止所拥有的

例如，discord表单部分

单击gif选项后，将呈现gif组件，用户可以选择gif并将其添加为注释

我如何使用react实现这一点？下面是注释表单组件

评论表单

import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import PropTypes from "prop-types";
import React from "react";

const CommentForm = (props) => (
  <div>
    <form onSubmit={props.onSubmit}>
      <TextField
        type="text"
        style={{ borderRadius: "50%" }}
        id="outlined-multiline-static"
        label="Write A Comment"
        multiline={true}
        name="comment_body"
        value={props.commentBody}
        rows="3"
        fullWidth={true}
        margin="normal"
        variant="outlined"
        onChange={props.commentChange}
      />
      <br />
      <br />
      <Button type="submit" variant="outlined" color="primary">
        Post A Comment
     </Button>
    </form>
  </div>
);
export default CommentForm;

从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“道具类型”导入道具类型；
从“React”导入React；
const CommentForm=（道具）=>(




发表评论
);
导出默认格式；

我想我是通过进一步研究才弄明白的。只需将inputProps添加到评论表单

参考这个例子

像这样

import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import React from "react";
import GifIcon from '@material-ui/icons/Gif';
import InputAdornment from '@material-ui/core/InputAdornment';
const CommentForm = (props) => (
  <div>
    <form onSubmit={props.onSubmit}>
      <TextField
        type="text"
        style={{ borderRadius: "50%" }}
        id="outlined-multiline-static"
        label="Write A Comment"
        multiline={true}
        name="comment_body"
        value={props.commentBody}
        rows="3"
        fullWidth={true}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <GifIcon onClick={() => console.log('test')}/>
            </InputAdornment>
          ),
        }}
        margin="normal"
        variant="outlined"
        onChange={props.commentChange}
      />
      <br />
      <br />
      <Button type="submit" variant="outlined" color="primary">
        Post A Comment
     </Button>
    </form>
  </div>
);
export default CommentForm;

从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“React”导入React；
从“@material ui/icons/Gif”导入GifIcon；
从“@material ui/core/inputadornation”导入输入；
const CommentForm=（道具）=>(
),
}}
margin=“正常”
variant=“概述”
onChange={props.commentChange}
/>




发表评论
);
导出默认格式；