rax-textinput
支持
Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序
描述
TextInput 是唤起用户输入的基础组件。
当定义 multiline 输入多行文字时其功能相当于 textarea。
安装
$ npm install rax-textinput --save
属性
方法
focus()
取焦点方法(小程序不支持, 快应用不支持)
blur()
失去焦点方法(小程序不支持,快应用不支持)
clear()
清除文本框内容(小程序不支持, 快应用不支持)
import { createElement, Component, render, createRef } from "rax";
import DriverUniversal from "driver-universal";
import View from "rax-view";
import Text from "rax-text";
import TextInput from "rax-textinput";
const styles = {
root: {
width: '750rpx',
paddingTop: '20rpx'
},
container: {
padding: '20rpx',
borderStyle: "solid",
borderColor: "#dddddd",
borderWidth: '1rpx',
marginLeft: '20rpx',
marginRight: '20rpx',
marginBottom: '10rpx'
},
default: {
borderWidth: '1rpx',
borderColor: "#0f0f0f",
flex: 1
},
eventLabel: {
margin: '3rpx',
fontSize: '24rpx'
},
multiline: {
borderWidth: '1rpx',
borderColor: "#0f0f0f",
flex: 1,
fontSize: '26rpx',
height: '100rpx',
padding: '8rpx',
marginBottom: '8rpx'
},
hashtag: {
color: "blue",
margin: '10rpx',
fontWeight: "bold"
}
};
class TextAreaDemo extends Component {
constructor(props) {
super(props);
this.state = {
text: "Hello #World , Hello #Rax , Hello #天天好心情"
};
}
render() {
let delimiter = /\s+/;
// split string
let _text = this.state.text;
let token,
index,
parts = [];
while (_text) {
delimiter.lastIndex = 0;
token = delimiter.exec(_text);
if (token === null) {
break;
}
index = token.index;
if (token[0].length === 0) {
index = 1;
}
parts.push(_text.substr(0, index));
parts.push(token[0]);
index = index + token[0].length;
_text = _text.slice(index);
}
parts.push(_text);
let hashtags = [];
parts.forEach(text => {
if (/^#/.test(text)) {
hashtags.push(
<Text key={text} style={styles.hashtag}>
{text}
</Text>
);
}
});
return (
<View style={styles.container}>
<TextInput
multiline={true}
numberOfLines={3}
style={styles.multiline}
value={this.state.text}
onChangeText={text => {
this.setState({ text });
}}
/>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
{hashtags}
</View>
</View>
);
}
}
class App extends Component {
state = {
value: "I am value",
curText: "<No Event>",
prevText: "<No Event>",
prev2Text: "<No Event>",
prev3Text: "<No Event>"
};
inputRef = createRef();
updateText = text => {
this.setState(state => {
return {
curText: text,
prevText: state.curText,
prev2Text: state.prevText,
prev3Text: state.prev2Text
};
});
};
render() {
// define delimiter
return (
<View style={styles.root}>
<View style={styles.container}>
<TextInput
autoCapitalize="none"
placeholder="Enter text to see events"
autoCorrect={false}
onChange={event => {
this.updateText("onChange text: " + event.nativeEvent.text);
}}
style={styles.default}
/>
<Text style={styles.eventLabel}>
{this.state.curText}
{"\n"}
(prev: {this.state.prevText}){"\n"}
(prev2: {this.state.prev2Text}){"\n"}
(prev3: {this.state.prev3Text})
</Text>
</View>
<View style={styles.container}>
<TextInput
placeholder="Enter text to see events"
value={this.state.value}
ref={this.inputRef}
style={{
width: '600rpx',
marginTop: '20rpx',
borderWidth: "2rpx",
borderColor: "#dddddd",
borderStyle: "solid"
}}
onChangeText={text => {
this.setState({
value: text
});
}}
/>
<View
style={{
marginTop: '20rpx'
}}
onFocus={e => {
this.setState({
value: e.nativeEvent.text
});
}}
onClick={() => {
this.setState({
value: "I am value"
});
}}
>
<Text>Reset</Text>
</View>
</View>
<TextAreaDemo />
</View>
);
}
}
render(<App />, document.body, { driver: DriverUniversal });
注意
- 支付宝小程序中, input 如果父类是 position: fixed,可以加上 enableNative="false",解决输入框错位问题。
- 微信小程序中,如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true