Как изменить цвет границы 'onChangeText' в компоненте TextInput

Question

Итак, я пытался создать этот симпатичный маленький компонент TextInput, в котором цвет рамки меняется, как только я начинаю печатать, и если я очищаю текст, цвет рамки возвращается к значению по умолчанию.

Answer 1

Вот компонент TextInput . Когда вы пишете в текстовом поле, цвет рамки текстового поля будет изменен, и после очистки текста он устанавливает значение по умолчанию. Пожалуйста, напишите небольшой css класс .myInput , который я написал в TextInput. css

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:

.myInput {    
   outline-width: 0; 
}