Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为何自定义表单组件不能正常与Form合用 #915

Closed
1 task done
JonChanGit opened this issue Jun 28, 2019 · 4 comments
Closed
1 task done

为何自定义表单组件不能正常与Form合用 #915

JonChanGit opened this issue Jun 28, 2019 · 4 comments

Comments

@JonChanGit
Copy link

JonChanGit commented Jun 28, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.10

Environment

Microsoft Edge is up to date Version 76.0.152.0 (Official build) dev (64-bit)

Reproduction link

https://vue.ant.design/components/form-cn/#components-form-demo-customized-form-controls

Steps to reproduce

创建如下自定义表单

<script>
/**
   * CustomizedInput
   * @author Jon Chan
   * @date 2019/6/28 15:46
   */
export default {
  name: 'CustomizedInput',
  components: {},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Number],
      default () {
        return 's'
      }
    }
  },
  data () {
    const val = this.value
    return {
      stateValue: val || ''
    }
  },
  watch: {
    value (val) {
      console.warn(val)
    }
  },
  computed: {},
  beforeCreate: function () {
  },
  mounted: function () {
  },
  methods: {
    triggerChange (e) {
      this.stateValue = e.target.value
      this.$emit('change', this.stateValue)
    },
    setFieldsValue () {
      console.log('xx')
    }
  },
  render () {
    return (
      <span class="customized-input">
        <a-input
          type="text"
          value={this.stateValue}
          style="width: 63%; margin-right: 2%;"
          placeholder="自定义组件"
          onChange="triggerChange"
        />
        <span style="width: 32%">自定义组件[{this.stateValue}]</span>
      </span>
    )
  }
}
</script>

<style lang="less" scoped>
  .customized-input {
  }
</style>

在控制台报错:

Warning: `getFieldDecorator` will override `value`, so please don't set `value and v-model` directly and use `setFieldsValue` to set it.     browser.js?e834:49

image

What is expected?

应该要能正常使用不报错才对,看了半天官网没搞懂要怎么使得v-decorator正确控制自定义表单

What is actually happening?

如上所述


希望能给个完整的示例

@sendya
Copy link
Member

sendya commented Jul 1, 2019

value 不要设置 default

@sendya
Copy link
Member

sendya commented Jul 1, 2019

@tangjinzhou
Copy link
Member

这个有待优化,理想状态下default应该可以有

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 22, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants