Ant Design 表单中 Input 组件的 addonBefore 值获取问题解析

问题背景

在使用 Ant Design 的表单组件时，开发者经常会在 Input 组件中使用 addonBefore 属性来添加前缀内容。然而，很多开发者发现，当表单提交时，这些前缀内容的值并不会自动包含在表单数据中。

技术原理分析

Ant Design 的表单组件采用了受控组件的设计模式。Form.Item 只会收集其直接子组件的 value 属性值，而 addonBefore 和 addonAfter 作为 Input 组件的装饰性元素，并不参与表单数据的收集过程。

解决方案

方法一：使用独立的状态管理

可以通过 React 的状态管理机制来单独跟踪 addonBefore 的值：

const [prefixValue, setPrefixValue] = useState('default');

const selectBefore = (
  <Select 
    defaultValue={prefixValue}
    onChange={setPrefixValue}
    options={options}
  />
);

const onFinish = (values) => {
  console.log({
    ...values,
    prefix: prefixValue
  });
};

方法二：使用自定义表单控件

更符合 Ant Design 表单设计理念的方式是创建一个自定义表单控件：

const CustomInputWithAddon = ({ value, onChange }) => {
  const [inputValue, setInputValue] = useState('');
  const [prefixValue, setPrefixValue] = useState('default');

  const handleChange = (e) => {
    setInputValue(e.target.value);
    onChange({
      input: e.target.value,
      prefix: prefixValue
    });
  };

  const handlePrefixChange = (value) => {
    setPrefixValue(value);
    onChange({
      input: inputValue,
      prefix: value
    });
  };

  return (
    <Input
      value={inputValue}
      onChange={handleChange}
      addonBefore={
        <Select 
          value={prefixValue}
          onChange={handlePrefixChange}
          options={options}
        />
      }
    />
  );
};

最佳实践建议

1. 对于简单的场景，使用独立状态管理即可
2. 对于需要复用的复杂表单控件，建议封装成自定义表单控件
3. 考虑将前缀和后缀的值与输入值合并为一个对象进行管理
4. 在表单提交时，可以对这些关联值进行统一验证

总结

Ant Design 的表单组件提供了强大的功能，但需要理解其数据收集机制。通过合理的设计模式，我们可以轻松实现包含前缀/后缀值的表单数据收集功能。这种设计既保持了表单的灵活性，又确保了数据收集的完整性。