Input 和 Textarea 组件

作为基础组件,出于减少通信的设计需要,Input 组件文本框类型时不是受控组件。value 用于设置初始值,开发者仍然可以从 onchange 事件中获取 value 值,当需要强制同步文本框内容时调用 setValue 方法实现。

Input 组件的属性和原生一致。

Input示例

代码节选自:yis-demo/src/pages/components/input/index.js
export default class InputDemo extends PageCore {
    onChange = ({value}) => {
        if(value === 'abc'){
            this.inputEl.setValue('abndefghigklmnopqrstuvwxyz');
        }
    }
    render(){
        return (
            <Page>
                <Input placeholder="请输入abc" onChange={this.onChange} ref={(inputEl)=> { this.inputEl = inputEl}}/>
            </Page>
        )
    }
}

Textarea示例

代码节选自:yis-demo/src/pages/components/input/index.js
export default class TextareaDemo extends PageCore {
    onTextareaChange = ({ value }) => {
        if (value === 'abc') {
            this.textarea.setValue('这是输入abc后替换的文字');
        }
        this.setState({
            textarea: value
        });
    }
    render(){
        return (
            <Page>
                <Textarea
                    placeholder="请输入abc"
                    onChange={this.onTextareaChange}
                    ref={(inputEl) => { this.textarea = inputEl }
                />
            </Page>
        )
    }
}

说明事项

Textarea 组件与 <Input type="text"> 方法一致,可参考 Input 组件进行控制

参数

参数名 类型 必选 默认值 描述
onChange function onchang事件
原生属性 * ×