Input

input框组件

  • 使用方式跟原生一致, 支持disabled。
  • 通过type设置input的类型, 可选text,checkbox,radio。
  • 当类型为text时, 可通过defaultValue设置默认值; 可通过value和onChange事件配合使用手动设置输入值。
  • 当类型为checkbox&radio时, 可通过label设置展示的文字。
  • 当类型为checkbox&radio时, 可通过defaultChecked设置默认值; 可通过checked和onChange事件配合使用手动设置输入值。

主要属性和接口：

  • type:input类型, 默认text
    如：<Input type="checkbox" />
  • defaultValue:默认值(text)
    如：<Input type="text" defaultValue="测试" />
  • value&onChange:(text)
    如：<Input type="text" value={this.state.value} onChange={()=>{this.setState({value:"测试"})}} />
  • label:展示的文字信息(checkbox&radio), 默认空
    如：<Input type="checkbox" label="测试" />
  • defaultChecked:默认值(checkbox&radio)
    如：<Input type="checkbox" defaultChecked={true} />
  • checked&onChange:(checkbox&radio)
    如：<Input type="checkbox" checked={this.state.checked} onChange={()=>{this.setState({checked:false})}} />

方法

属性

事件

Extends Component
Defined in: src/Input.js:6
Module: 表单组件

Available since 0.1.0

Constructor

Input

Input ()

Defined in src/Input.js:6

Available since 0.1.0

Example:

import React, { Component } from "react";
import {Input} from "phoenix-ui";
import Code from "./code/code";

export default class input extends Component{

    constructor(props,context){

        super(props,context);

        this.state = {
            name: "value和onChange配合使用",
            checkboxChecked: true,
            radioChecked: true
        };
    }

    setValue(key,e){
        let o ={};
        o[key || e.target.name] = e.target.value;
        this.setState(o);
    }

    onCheckboxChange(){
        this.setState({
            checkboxChecked: !this.state.checkboxChecked
        });
    }

    onRadioChange(){
        this.setState({
            radioChecked: !this.state.radioChecked
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Input</h2>
                <h3 className="comp-type">type(默认text) 类型</h3>
                <h3 className="comp-type">text 文本框</h3>
                <div className="content">
                    <Input placeholder="默认text" />
                    <Input type="text" defaultValue="默认值defaultValue" placeholder="请输入" />
                    <Input type="text" value={this.state.name} onChange={::this.setValue.bind(this,"name")} placeholder="请输入" />
                </div>
                <Code target="input-text" />

                <h3 className="comp-type">checkbox 多选框</h3>
                <div className="content">
                    <h3 className="comp-tip">默认</h3>
                    <Input type="checkbox" label="苹果" />
                    <h3 className="comp-tip">defaultChecked 初始传值</h3>
                    <Input type="checkbox" label="香蕉" defaultChecked={true} />
                    <h3 className="comp-tip">checked和onChange配合使用</h3>
                    <Input type="checkbox" label="西瓜" checked={this.state.checkboxChecked} onChange={::this.onCheckboxChange} />
                    <h3 className="comp-tip">disabled</h3>
                    <Input type="checkbox" label="西瓜" disabled/>
                </div>
                <Code target="input-checkbox" />

                <h3 className="comp-type">radio 单选框</h3>
                <div className="content">
                    <h3 className="comp-tip">默认</h3>
                    <Input type="radio" label="男" name="sex1" />
                    <Input type="radio" label="女" name="sex1" />
                    <h3 className="comp-tip">defaultChecked 初始传值</h3>
                    <Input type="radio" label="男" name="sex2" defaultChecked={true}/>
                    <Input type="radio" label="女" name="sex2"/>
                    <h3 className="comp-tip">checked和onChange配合使用</h3>
                    <Input type="radio" label="男" name="sex3" checked={this.state.radioChecked} onChange={::this.onRadioChange}/>
                    <Input type="radio" label="女" name="sex3" checked={!this.state.radioChecked} onChange={::this.onRadioChange}/>
                    <h3 className="comp-tip">disabled</h3>
                    <Input type="radio" label="男" name="sex4" disabled />
                    <Input type="radio" label="女" name="sex4" disabled />
                </div>
                <Code target="input-radio" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/Input.js:54

样式前缀

Default:

'input'

componentTag

String

Defined in src/Input.js:61

标签tagName

label

String

Defined in src/Input.js:47

类型为checkbox&radio时, 展示的文字信息

Default:

''

type

String

Defined in src/Input.js:40

input类型, 可选[text,checkbox,radio], 默认text

Default:

'text'

事件

onChange

Function

Defined in src/Input.js:67

更改值时触发的回调