Skip to content

Commit 88066a6

Browse files
committed
Add React 16 note
close #67
1 parent 8e7ca0b commit 88066a6

File tree

2 files changed

+59
-1
lines changed

2 files changed

+59
-1
lines changed

HISTORY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
- add action `contextMenu`
77

8-
## 2.0.0
8+
## 2.0.0 / 2017-09-25
99

1010
- support React 16
1111

README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,64 @@ npm run coverage
246246

247247
open coverage/ dir
248248

249+
## React 16 Note
250+
251+
Note: If you are using React 16, you won't access popup element's ref in parent component's componentDidMount, which means following code won't work.
252+
253+
```javascript
254+
class App extends React.Component {
255+
componentDidMount() {
256+
this.input.focus(); // error, this.input is undefined.
257+
}
258+
259+
render() {
260+
return (
261+
<Trigger
262+
action={['click']}
263+
popup={<div><input ref={node => this.input = node} type="text" /></div>}
264+
>
265+
<button>click</button>
266+
</Trigger>
267+
)
268+
}
269+
}
270+
```
271+
272+
Consider wrap your popup element to a separate component:
273+
274+
```javascript
275+
class InputPopup extends React.Component {
276+
componentDidMount() {
277+
this.onMount();
278+
}
279+
280+
render() {
281+
return (
282+
<div>
283+
<input ref={this.props.inputRef} type="text" />
284+
</div>
285+
);
286+
}
287+
}
288+
289+
class App extends React.Component {
290+
handlePopupMount() {
291+
this.input.focus(); // error, this.input is undefined.
292+
}
293+
294+
render() {
295+
return (
296+
<Trigger
297+
action={['click']}
298+
popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
299+
>
300+
<button>click</button>
301+
</Trigger>
302+
)
303+
}
304+
}
305+
```
306+
249307
## License
250308

251309
rc-trigger is released under the MIT license.

0 commit comments

Comments
 (0)