如何在 TextInput 組件中更改邊框顏色“onChangeText”

Question

所以，我試圖制作這個漂亮的小 TextInput 組件，當我開始輸入時邊框顏色會發生變化，如果我清除文本邊框顏色會返回默認值。

Answer 1

這是組件TextInput 。 當您在文本框中寫入時，文本框的邊框顏色將被更改，並且在清除文本后設置為默認值。 請寫一個小的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;

這是 css class：

.myInput {    
   outline-width: 0; 
}