自定义表单控件无效

[zzzzyp]

问题描述
自定义的表单控件，加了static behaviors = ['wx://form-field']，在form里获取不到它的值

复现步骤
[复现问题的步骤]

1. 创建自定义表单控件

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

class InputItem extends Component {

  static behaviors = ['wx://form-field']

  state = {
    value: ''
  }


  render() {
    return (
      <View></View>
    )
  }
}

export default InputItem

2. 提交form,并打印

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Form } from '@tarojs/components'
import InputItem from '../../components/InputItem'


class Index extends Component {


  onSubmit = (e) => {
    console.log(e.detail.value)
  }

  render () {
    return (
      <View className='index'>
        <Form onSubmit={this.onSubmit}>
          <InputItem name='test'></InputItem>
          <Button formType='submit'>submit</Button>
        </Form>
      </View>
    )
  }
}

export default Index

期望行为
打印的值应为{ test: "" }

报错信息
实际打印值为{}

系统信息

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v1.3.12]
• Node.js 版本 [e.g. v10.13.0]
• 报错平台 [weapp]

补充信息
复现的时候发现只要在自定义的组件中引用一下props.name，就可以拿到值了:(

[Chen-jj]

@zzzzyp 的确，没有显式使用到的 state 或 props 不会被加入到小程序的 data 中：

taro/packages/taro-weapp/src/lifecycle.js

Lines 154 to 174 in b8c29c6

	data = Object.assign({}, props, data)
	if (component.$usedState && component.$usedState.length) {
	const _data = {}
	component.$usedState.forEach(key => {
	let val = safeGet(data, key)
	if (typeof val === 'undefined') {
	return
	}
	if (typeof val === 'object') {
	if (isEmptyObject(val)) return safeSet(_data, key, {})
	val = shakeFnFromObject(val)
	// 避免筛选完 Fn 后产生了空对象还去渲染
	if (!isEmptyObject(val)) safeSet(_data, key, val)
	} else {
	safeSet(_data, key, val)
	}
	})
	data = _data
	}
	data['$taroCompReady'] = true

这个 behavior 我感觉是给组件定义了 name 和 value 的 properties，但并没有在 Taro 组件里显式声明或使用。因此建议写上 defaultProps 绕过。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~