代码之家 › 专栏 › 技术社区 › BARNOWL

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

reactjs

BARNOWL · 技术社区 · 4 年前

例如,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;

1 回复 | 直到 4 年前

BARNOWL 4 年前

我想我是通过进一步调查才弄明白的。只需要在评论表单中添加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;

推荐文章