@yizhou-library/cascader-trigger
v0.0.9
Published
级联面板选择器 选择树触发器
Downloads
1
Readme
rc-trigger
React Trigger Component
Browser Support
| | | | | | | --- | --- | --- | --- | --- | | IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Development
npm install
npm start
Example
http://localhost:8200/examples/
online example: http://react-component.github.io/trigger/examples/
Feature
- supported on IE 8+, Chrome, Firefox, and Safari
install
Usage
Include the default styling and then:
import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rc-trigger';
ReactDOM.render((
<Trigger
action={['click']}
popup={<span>popup</span>}
popupAlign={{
points: ['tl', 'bl'],
offset: [0, 3]
}}
>
<a href='#'>hover</a>
</Trigger>
), container);
API
props
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
React 16 Note
After React 16, you won't access popup element's ref in parent component's componentDidMount, which means following code won't work.
class App extends React.Component {
componentDidMount() {
this.input.focus(); // error, this.input is undefined.
}
render() {
return (
<Trigger
action={['click']}
popup={<div><input ref={node => this.input = node} type="text" /></div>}
>
<button>click</button>
</Trigger>
)
}
}
Consider wrap your popup element to a separate component:
class InputPopup extends React.Component {
componentDidMount() {
this.props.onMount();
}
render() {
return (
<div>
<input ref={this.props.inputRef} type="text" />
</div>
);
}
}
class App extends React.Component {
handlePopupMount() {
this.input.focus(); // error, this.input is undefined.
}
render() {
return (
<Trigger
action={['click']}
popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
>
<button>click</button>
</Trigger>
)
}
}
License
rc-trigger is released under the MIT license.