发布房源（三）02——获取表单数据- onSelect 处理方法 & 打印表单数据

发布房源——获取表单数据- onSelect 处理方法 & 打印表单数据

获取表单数据

• 分析

  • InputItem、TextareaItem、Picker 组件，都使用 onChange 配置项，来获取当前值。
  • 处理方式：封装一个事件处理程序 getValue 来统一获取三种组件的值。

• 步骤

  • 创建方法 getValue 作为三个组件的事件处理程序。
  • 该方法接收两个参数：1 name 当前状态名 2 value 当前输入值或选中值。
  • 分别给 InputItem / TextareaItem / Picker 组件，添加 onChange 配置项。
  • 分别调用 getValue 并传递 name 和 value 两个参数（注意：Picker 组件选中值为数组，而接口需要字符 串，所以，取索引号为 0 的值即可）。
  • 给 HousePackge 组件，添加 onSelect 属性。
  • 在 onSelect 处理方法中，通过参数获取到当前选中项的值。 (子传父)
  • 根据发布房源接口的参数说明，将获取到的数组类型的选中值，转化为字符串类型。
  • 调用 setState() 更新状态。

getValue = (name, v) => {
  this.setState({
    [name]: v
  })
}

// Picker的数据需要取第一个
this.getValue('roomType', value[0])

// 子传父-> 把数据join成|分割的字符串
<HousePackge
  select
  onSelect={selectNames => {
    this.setState({
      supporting: selectNames.join('|')
    })
  }}
/>

获取房源表单数据