Javascript 如何在物料界面的“我的输入”字段前添加金钱符号

我有一个输入字段，我希望在左边有一个美元符号。我检查了文档，并尝试使用

inputadornation

执行此操作，但每次执行此操作时，美元符号都不会出现。这是我的代码

请像这样更改“value”属性，以在输入之前获取符号

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

用网格将它们包裹起来

使用以下命令更改代码：

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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Slider”导入滑块；
从“@material ui/core/TextField”导入输入；
从“@material ui/core/inputadornation”导入输入；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/FormControl”导入FormControl；
const useStyles=makeStyles({
根目录：{
宽度：250
},
输入：{
宽度：100
}
});
导出默认函数InputSlider（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（500）；
常量handleSliderChange=（事件，新值）=>{
设置值（新值）；
};
const handleInputChange=事件=>{
setValue（event.target.value==“”？“”：编号（event.target.value））；
};
返回(
$
);
}

在

输入

字段中使用以下代码，而不是启动装饰

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

InputProps={{
起始日期：$，
}}

您刚刚导入了错误的

输入

在第5行的
demo.js
中：
从“@material ui/core/TextField”导入输入

正确的导入应该是：
从'@material ui/core/Input'导入输入
这是正确的。问题仍然是为什么需要这样做。我想知道这一点well@Mordechai正如@userhooke所说，@A.K.M.Adib yes，这是您导入的
textfield
的语法。要遵循文档，您必须从物料导入
输入
-ui@A.K.M.Adib我懂了！！您将
TextField
作为
Input
导入，而不是直接导入
Input
。。。。