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

【问题标题】：How to change the border colour 'onChangeText' in TextInput Component如何在 TextInput 组件中更改边框颜色“onChangeText”
【发布时间】：2020-07-22 11:56:12
【问题描述】：

所以，我试图制作这个漂亮的小 TextInput 组件，当我开始输入时边框颜色会发生变化，如果我清除文本边框颜色会恢复为默认值。

【问题讨论】：

如果您需要帮助，请提供一些代码。
如果我点击 TextInput，我需要了解如何动态更改属性

标签： reactjs react-native textinput

【解决方案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; 
}

【讨论】：