antd addonAfter 的使用

要实现这样的效果

就得用到antd的addonAfter

     <Form.Item
       name="pack_spec_val"
       label="包装规格"
       rules={[{ required: true, message: "请输入数字" }]}
     >
       <Input type="number" addonAfter={unitsAddonAfter} placeholder="请输入" />
     </Form.Item>

AddonAfter的下拉选项需要组织为select：

    // 包装单位input后缀选择
    const unitsAddonAfter = (
      <Select
        onChange={(e) => { this.setState({ packUnit: e }) }}
        value = {packUnit} // 设置缺省值，注意这里一定要用value而非DefaultValue
        className="select-after"
      >
        {unitOptions}
      </Select>
    )

这里要解决三个问题：

• 下拉选项因为很多页面要复用，因此要放到consts里面
• 缺省值的问题，如果是编辑记录的模式，缺省值应来自于data。这里的技巧是使用 value 属性 而非 defaultValue
• 获取用户的输入，通过onChange保持state.packUnit与界面的同步

选项复用

把通用数据放到consts.js里

// 常用单位数组
export const units = ["L", "ML", "G", "KG"]
// 常用单位 options
export const unitOptions = (
  units.map((ele, index) => {
    return(
      <Option key={index} value={ele}>{ele}</Option>
    )
  })
)

page页面中引入并使用

引入

// 通用的常量
import {
  unitOptions,
  packTypeOptions,
  periodOptions,
  storageOptions
} from "@/consts/consts";

使用

    // 包装单位input后缀选择
    const unitsAddonAfter = (
      <Select
        onChange={(e) => { this.setState({ packUnit: e }) }}
        value = {packUnit} // 设置缺省值，注意这里一定要用value而非DefaultValue
        className="select-after"
      >
        {unitOptions}
      </Select>
    )

获取AddonAfter输入

定义state.packUnit并通过onChange保持界面数据同步

react已经不推荐直接使用this.state.varname了，推荐先用解构赋值获取state.varname

缺省值

当前若为编辑记录，则应从获取到的该条记录的当前单位值来设置AddonAfter。

注意react的事件顺序：componentDidMount调用getEditData获取正在编辑的数据，并设置state.packUnit为数据的值。接着render会获取state.packUnit的值并设置到AddonAfter控件上。

数据提交

提交数据时，同样通过解构赋值获取state.packUnit的值即为当前的输入

以上源代码开放在这里： https://gitee.com/keywan/umi-antdpro