Question

因此，我试图制作一个不错的TextInput组件，其边框颜色会在我开始键入时立即更改，如果我清除了，则边框颜色会恢复为默认值。

Answer 1

这里是组件 TextInput 。在文本框中书写时，文本框的边框颜色将被更改，并且在清除文本后将其设置为默认值。请编写一个我在 TextInput.css

中编写的小 css类.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类：

.myInput {    
   outline-width: 0; 
}

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

1 个答案: