时间戳

首页 > 解决方案 > 如何从材料 ui 文本字段 i 中删除选择文件工具提示

reactjs - 如何从材料 ui 文本字段 i 中删除选择文件工具提示

问题描述

我只想在选择图像时在文本字段中显示图像名称，不想在 textfiled 中选择文件按钮

<TextField variant='outlined' fullWidth    type="file"
                                InputProps={{ startAdornment: (
                                    <InputAdornment position="start">
                                    <PhotoCamera />
                                    </InputAdornment>
                                )
                                }}
                            />

标签： reactjsmaterial-ui

解决方案

您可以在选择文件时将TextField的类型从文件更改为文本，并在输入字段中显示文件名。例子

const [file, setFile] = React.useState(null);

    <TextField
      variant="outlined"
      fullWidth
      value={file?.name||''}
      type={!file ? "file" : "text"}
      onChange={(e) => {
        if (!file) setFile(e.target.files[0]);
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <PhotoCamera />
          </InputAdornment>
        )
      }}
    />

推荐阅读