ost-ui/docs/static/js/8.1ede905a690c.js

ost ui for react

(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{73:function(n,t){n.exports="## OstInput 示例\n\n\n```jsx\nimport {OstList, OstInput} from 'ost-ui';\n\n\n:::$demo\nclass Demo extends Component {\n\n    constructor(props) {\n        super(props);\n        this.state = { \n            value: '',\n            phoneNo: '',\n        };\n    }\n\n    render() {\n       const { value, phoneNo } = this.state;\n\n       return([\n        \n        <OstList.card title=\"输入框\" key='0'>\n          <OstList title='标准输入'>\n            <OstInput placeholder='请输入' />\n          </OstList>\n          <OstList title='不可输入'>\n            <OstInput defaultValue='禁用' disabled />\n          </OstList>\n        </OstList.card>,\n\n        <OstList.card title=\"登陆\" key='1'>\n          <OstList title='手机号'>\n            <OstInput\n                maxLength={11}\n                value={phoneNo}\n                onChange={e => {\n                    const _val = e.target.value;\n                    this.setState({phoneNo: _val})\n                }}\n                type='number'\n                placeholder='请输入手机号' />\n          </OstList>\n          <OstList title='验证码'>\n            <OstInput\n                type='number'\n                countdown={60}\n                countstart={(stop)=> {\n                    console.log('倒计时开始');\n                    console.log('倒计时将在5s中断');\n                    setTimeout(stop, 5000);\n                }}\n                countend={()=> console.log('倒计时结束')}\n                onChange={e => console.log(e.target.value)}\n                placeholder='请输入验证码' />\n          </OstList>\n          <OstList title='验证码'>\n            <OstInput\n                countDisabled\n                countdown={60}\n                placeholder='验证码按钮已禁' />\n          </OstList>\n        </OstList.card>,\n\n        <OstList.card title=\"输入框\" key='2'>\n          <OstList title='请输入测试内容'>\n            <OstInput\n                placeholder='请输入' \n                value={value}\n                onDel={()=>this.setState({value: ''})}\n                onChange={e => this.setState({value: e.currentTarget.value})} />\n          </OstList>\n        </OstList.card>\n       ])\n    }\n}\n:::$\n```\n  \n\n```jsx\nimport {OstList, OstInput, OstNumKeyboard} from 'ost-ui';\n\n\n:::$demo\nclass Demo extends Component {\n\n    constructor(props) {\n        super(props);\n        this.state = { \n            sixBitValue: '',\n            showKeyBoard: false \n        };\n    }\n\n    render() {\n       const { sixBitValue } = this.state;\n\n       return([\n        <OstList.card title=\"6位数字输入框\" key='2'>\n            <OstInput.sixBit\n                style={{padding: '10px 0'}}\n                autoFocus={false}\n                value={sixBitValue}\n                onChange={(v) => {\n                    console.log('onChange>>>', v)\n                }}\n                onBlur={(v) => {\n                    this.setState({\n                        showKeyBoard: false, \n                        sixBitValue: ''\n                    });\n                    console.log('onBlur callback>>>', v);\n                }}\n                onFocus={(v) => {\n                    this.setState({showKeyBoard: true});\n                    console.log('onFocus callback>>>', v);\n                }}\n             >\n             </OstInput.sixBit>\n        </OstList.card>,\n        \n        <OstNumKeyboard\n            resetWhenClose\n            key='3'\n            maxLength='6'\n            show={this.state.showKeyBoard} \n            onChange={v => this.setState({sixBitValue: v})} />\n       ])\n    }\n}\n:::$\n```\n"}}]);