[英]How to change the border colour 'onChangeText' in TextInput Component
So, I was trying to make this nice little TextInput Component where the border colour changes as soon as I start typing and if I clear the text border colour returns to default.所以,我试图制作这个漂亮的小 TextInput 组件,当我开始输入时边框颜色会发生变化,如果我清除文本边框颜色会返回默认值。
Here is the Component TextInput .这是组件TextInput 。 When you write in the textbox, border colour of the textbox will be changed and after clearing text it sets default.
当您在文本框中写入时,文本框的边框颜色将被更改,并且在清除文本后设置为默认值。 Please write a small css class.myInput which I wrote in TextInput.css
请写一个小的css class.myInput我在TextInput.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ
import React, {useEffect, useState} from 'react'
import './TextInput.css'
function TextInput(props) {
const [style, setStyle] = useState({});
function textChange(e) {
if(e.target.value === '')
setStyle({border: '1px solid gray'});
else
setStyle({border: '1px solid red'});
}
return (
<div>
<input className="myInput" style={style} onChange={textChange} type="text"/>
</div>
);
}
export default TextInput;
Here is the css class:这是 css class:
.myInput {
outline-width: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.