如何在输入标签中添加 %？

Question

const initiatlState = { weight: "" };
const [data, setData] = useState(initiatlState);

const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

<input type="text" name="weight" value={data.weight +"%"} 
onChange={handleChange} placeholder="weight" />

我想在输入 50 时显示 50 % 的值，但我得到的是 %5%0 像这样。

Answer 1

设置状态时，您需要从新值中删除 %。

const Example = () => {

  const initiatlState = { weight: "" };
  const [data, setData] = React.useState(initiatlState);

  const handleChange = (e) => {
      const { name, value } = e.target;
      setData({ ...data, [name]: value.replaceAll('%','') });
                                       // ^^^  sanitize the new value
  };

  return (
    <div>
      <input type="text" name="weight" value={data.weight +"%"} 
             onChange={handleChange} placeholder="weight" />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

如果您想显示 50 % ，即输入的百分比，我建议您显示带有该符号的标签。

例如作为引导程序

你可以用 HTML 和 CSS 添加它，简单的输入和标签标签，标签在输入上。