如何在 TextInput 组件中更改边框颜色 'onChangeText'

Question

所以，我试图制作这个漂亮的小 TextInput 组件，其中边框颜色会在我开始输入时立即更改，如果我将文本边框颜色 returns 清除为默认值。

Answer 1

这是组件 TextInput。当您在文本框中书写时，文本框的边框颜色将发生变化，清除文本后它会设置为默认值。请写一个我在TextInput.css

中写的小cssclass.myInput

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;

这里是 css class:

.myInput {    
   outline-width: 0; 
}

如何在 TextInput 组件中更改边框颜色 'onChangeText'

How to change the border colour 'onChangeText' in TextInput Component

textinput

reactjs

react-native