React Form 状态和修剪值答案

【问题标题】：React Form state and trimming valueReact Form 状态和修剪值
【发布时间】：2022-09-28 05:45:20
【问题描述】：

在我的 React 应用程序中，我有一个包含几个字段的表单，我想修剪用户在选项卡上输入的值。但是使用下面的代码，我根本无法输入任何空格。我有下面的相关代码。

我需要做什么才能使用户能够输入任何数据？（即使有前导/尾随空格......只是在制表符上，它应该被修剪并显示给用户）。

const [form, setForm] = useState({
        fName: \'\',
        lName: \'\'
    });
const handleChange = (event) => {
    const {name, value} = event.target;
    setForm({
        ...form,
        [name]: value.trim()
    })
}
    
    
<Input 
    type=\"text\"
    value={form.fName}
    onChange={handleChange}
    onClick={handleChange}
/>  

<Input 
    type=\"text\"
    value={form.lName}
    onChange={handleChange}
    onClick={handleChange}
/>

提交表单时修剪值
是的，实际上这是我正在考虑的选项之一......但如果这样做，用户将不会在屏幕上获得任何反馈
你可以trim当你输入时：onKeyPress={(e) => {if (e.key === \"Enter\") {setForm({ ...form, [name]: e.target.value.trim() })

标签： javascript reactjs

【解决方案1】：

您可以使用 onBlur 事件。基本上你可以有一个方法只是修整（大部分时间它用于验证）。这是一个示例：

const [form, setForm] = useState({
    fName: '',
    lName: ''
});
const handleChange = (event) => {
    const {name, value} = event.target;
    setForm({
        ...form,
        [name]: value,
    })
}

const handleBlur = (event) => {
    const {name, value} = event.target;
    setForm({
        ...form,
        [name]: value.trim()
    })
}
    
    
<Input 
    type="text"
    value={form.fName}
    onChange={handleChange}
    onClick={handleChange}
    onBlur={handleBlur}
/>  

<Input 
    type="text"
    value={form.lName}
    onChange={handleChange}
    onClick={handleChange}
    onBlur={handleBlur}
/>

如果你不熟悉模糊事件here is a doc

也有一些不错的article

【讨论】：

【解决方案2】：

尝试 onBlur 事件：

export default function App() {
  const [form, setForm] = useState({
    fName: "",
    lName: ""
  });
  const handleChange = (event) => {
    const { name, value } = event.target;
    setForm({
      ...form,
      [name]: value
    });
  };

  return (
    <input
      value={form.fName}
      name="fName"
      onChange={handleChange}
      onBlur={() => {
        // move in a separate function
        const { name, value } = event.target;
        setForm({ ...form, [name]: form[name].trim() });
      }}
    />
  );
}

【讨论】：