账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antd-mobile中使用rc-form,如何设置自定义组件的value?
    20
    0
    class MyComponent  extends Component {
      submit = () => {
        this.props.form.validateFields((error, value) => {
          if (error != undefined) {
            console.error(error);
          }
          console.log(value);
        });
      }
      render() {
        return  <div>
             <InputItem {...getFieldProps("input1")} >文本框</InputItem>//这个能取到值
             <MixedInput {...getFieldProps('input2')}>自定义组件</MixedInput>//这个取到值是undefined
        </div>
      }
    }
    
    export default createForm()(MyComponent)

    rc-form要求组件必须具有value和onChange

    getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
    Will create props which can be set on a input/InputComponent which support value and onChange interface.

    After set, this will create a binding with this input.

    MixedInput是我自定义的组件

    class MixedInput extends Component {
        value = () => {
            return "xxx"
        }
        onChange = () => {
            console.log("set value")
            this.setState({ value: 'xxx' });
        }
        render() {
            let options = this.props.items.map(function (option, idx) {
                return { value: option.value, label: option.text }
            });
            return (
                <div>
                    <Picker data={options} cols={1}  onChange={this.onChange}>
                        <List.Item>{this.props.label}</List.Item>
                    </Picker>
                    <TextareaItem rows={3} onChange={this.onChange} />
                </div>
            )
        }
    }
    export default MixedInput

    这样设置并不能起作用,在submit获取到的属性值始终是undefined,哪位大神麻烦告诉我自定义组件rc-form的使用,感激不尽

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部