如何在 Material UI 中的輸入字段前添加貨幣符號

Question

我有一個輸入字段，我想在左邊有一個美元符號。 我檢查了文檔並嘗試使用InputAdornment進行操作，但每次我這樣做時，美元符號都不會出現。 這是我的代碼https://codesandbox.io/s/material-demo-wnei9?file=/demo.js

Answer 1

在Input字段中使用下面的代碼，而不是開始裝飾。

InputProps={{
  startAdornment: <InputAdornment position="start">$</InputAdornment>,
}}

Answer 2

請像這樣更改“值”屬性以在輸入之前獲取符號。

    <Input
      className={classes.input}
      value={"$" + value}
      onChange={handleInputChange}
      startAdornment={<InputAdornment position="start">A</InputAdornment>}
    />

Answer 3

您剛剛導入了錯誤的Input 。

在第 5 行的demo.js中： import Input from "@material-ui/core/TextField";

正確的導入是： import Input from '@material-ui/core/Input';

Answer 4

用網格包裹它們。

用這個改變你的代碼：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";
import Input from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import Grid from "@material-ui/core/Grid";
import FormControl from "@material-ui/core/FormControl";

const useStyles = makeStyles({
  root: {
    width: 250
  },
  input: {
    width: 100
  }
});

export default function InputSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState(500);

  const handleSliderChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleInputChange = event => {
    setValue(event.target.value === "" ? "" : Number(event.target.value));
  };

  return (
    <div className={classes.root}>
      <Slider
        min={500}
        max={10000}
        value={typeof value === "number" ? value : 0}
        onChange={handleSliderChange}
        aria-labelledby="input-slider"
      />

      <FormControl fullWidth className={classes.margin}>
        <Grid container spacing={2} alignItems="center">
          <Grid item>$</Grid>
          <Grid item>
            <Input
              className={classes.input}
              value={value}
              onChange={handleInputChange}
              startAdornment={
                <InputAdornment position="start">A</InputAdornment>
              }
              style={{ display: "inline-block" }}
            />
          </Grid>
        </Grid>
      </FormControl>
    </div>
  );
}