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

我想我是通过进一步调查才弄明白的。只需要在评论表单中添加inputProps。

https://material-ui.com/components/text-fields/#icons

这样地

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;