{"action":"created","issue":{"url":"https://api.github.com/repos/ant-design/ant-design/issues/8671","repository_url":"https://api.github.com/repos/ant-design/ant-design","labels_url":"https://api.github.com/repos/ant-design/ant-design/issues/8671/labels{/name}","comments_url":"https://api.github.com/repos/ant-design/ant-design/issues/8671/comments","events_url":"https://api.github.com/repos/ant-design/ant-design/issues/8671/events","html_url":"https://github.com/ant-design/ant-design/issues/8671","id":283425616,"number":8671,"title":"Modal中无法根据id获取元素(Modal can't get elements by id)","user":{"login":"HeLang582","id":20653395,"avatar_url":"https://avatars1.githubusercontent.com/u/20653395?v=4","gravatar_id":"","url":"https://api.github.com/users/HeLang582","html_url":"https://github.com/HeLang582","followers_url":"https://api.github.com/users/HeLang582/followers","following_url":"https://api.github.com/users/HeLang582/following{/other_user}","gists_url":"https://api.github.com/users/HeLang582/gists{/gist_id}","starred_url":"https://api.github.com/users/HeLang582/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HeLang582/subscriptions","organizations_url":"https://api.github.com/users/HeLang582/orgs","repos_url":"https://api.github.com/users/HeLang582/repos","events_url":"https://api.github.com/users/HeLang582/events{/privacy}","received_events_url":"https://api.github.com/users/HeLang582/received_events","type":"User","site_admin":false},"labels":[{"id":340842022,"url":"https://api.github.com/repos/ant-design/ant-design/labels/Need%20Reproduce","name":"Need Reproduce","color":"fef2c0","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2017-12-20T01:56:53Z","updated_at":"2017-12-20T04:02:55Z","closed_at":null,"author_association":"NONE","body":"### Version\r\n3.0.2\r\n\r\n### Environment\r\nWin 10、 Chrome 63.0.3112.113 （32 ）\r\n\r\n### Reproduction link\r\n[https://codesandbox.io/s/kqx8pwjrr](https://codesandbox.io/s/kqx8pwjrr)\r\n\r\n### Steps to reproduce\r\n1、使用ant-design创建一个form，添加一个FormItem。   ( create a form using ant-design and add a FormItem)\r\n\r\n```\r\n<Form.Item {...formItemLayout}>\r\n      {getFieldDecorator('mosaic', {\r\n           initialValue: template.template.mosaic\r\n      })(<MasicSet />)}\r\n</Form.Item>\r\n```\r\n\r\n2、其中MasicSet 作为一个子组件传递进来。 (The MasicSet is passed in as a subcomponent)\r\n\r\n3、MasicSet  中包含一个Model，Model中有id为drag的div。 (The MasicSet contains a Model with a div with an id in it)\r\n\r\n```\r\n<Modal>\r\n       <div className={styles.drag} id=\"drag\">\r\n                     .........\r\n       </div\r\n</Modal>\r\n\r\n```\r\n四、在MasicSet 的生命周期componentDidMount中进行尝试获取“drag”。(Try to get \"drag\" in the life cycle of MasicSet)\r\n\r\n```\r\n  componentDidMount = () => {\r\n    let oDrag = document.getElementById('drag');\r\n    console.log('oDrag----',oDrag);                                       //oDrag = null\r\n    .......\r\n  };\r\n```\r\n\r\n\r\n\r\n### What is expected?\r\n项目功能期望：\r\n       点击一个预览按钮，弹出一个Model框，Modal框中可以展示一个图片，图片上层有一个通过canvas绘制的马赛克小框，可拖动可改变大小。根据这个马赛克所在位置获取到相对的XY坐标值，以及宽高值。\r\n\r\n\r\nProject function expectations:\r\nClick on a preview button to pop up a Model box. In the Modal box, you can show a picture. In the upper part of the picture, there is a Mosaic box drawn by canvas, which can be pulled and resized.According to the location of this Mosaic, the relative values of the x and y coordinates are obtained, as well as the wide and high values.\r\n\r\n\r\n### What is actually happening?\r\n现在存在的问题：\r\n      点击子组件MasicSet 的预览Button，Modal框弹出来。然后在元素的生命周期componentDidMount中通过getElementById尝试去获取id为drag的div发现返回值为null。是我用的有问题还是因为组件有BUG？？？因为测试了如果是一个非Model中的元素在生命周期中是可以通过id获取到该元素的。\r\n\r\n\r\nExisting problems:\r\nClick on the subcomponent <MasicSet /> preview Button, the Modal box pops out.Then, in the life cycle of the element, componentDidMount tries to obtain the return value of null by using getElementById to try to get a div that id is drag.Is it something that I use or is there a BUG in the component???Because you've tested if it's a non-model element that you can get by id in your life cycle.\r\n\r\n---\r\n希望大神可以给一个Modal中操作Canvas的思路（Hopefully the great god can give you a way to manipulate Canvas in a Modal）\r\n\r\n<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/ant-design/ant-design/issues/comments/352959009","html_url":"https://github.com/ant-design/ant-design/issues/8671#issuecomment-352959009","issue_url":"https://api.github.com/repos/ant-design/ant-design/issues/8671","id":352959009,"user":{"login":"yesmeck","id":465125,"avatar_url":"https://avatars0.githubusercontent.com/u/465125?v=4","gravatar_id":"","url":"https://api.github.com/users/yesmeck","html_url":"https://github.com/yesmeck","followers_url":"https://api.github.com/users/yesmeck/followers","following_url":"https://api.github.com/users/yesmeck/following{/other_user}","gists_url":"https://api.github.com/users/yesmeck/gists{/gist_id}","starred_url":"https://api.github.com/users/yesmeck/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yesmeck/subscriptions","organizations_url":"https://api.github.com/users/yesmeck/orgs","repos_url":"https://api.github.com/users/yesmeck/repos","events_url":"https://api.github.com/users/yesmeck/events{/privacy}","received_events_url":"https://api.github.com/users/yesmeck/received_events","type":"User","site_admin":false},"created_at":"2017-12-20T04:02:55Z","updated_at":"2017-12-20T04:02:55Z","author_association":"MEMBER","body":"```javascript\r\nclass Foo extends React.Component {\r\n   componentDidMount() {\r\n     // Access DOM here\r\n   }\r\n\r\n   render() {  ... }\r\n}\r\n\r\n\r\nclass App extends Rect.Component {\r\n  render() {\r\n    return (\r\n      <Modal><Foo /></Modal>\r\n    )\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"yesmeck"}}