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

Posted 2023-04-18

【中文标题】如何在 TextInput 组件中更改边框颜色“onChangeText”

【英文标题】：How to change the border colour 'onChangeText' in TextInput Component

【发布时间】：2020-07-22 11:56:12

【问题描述】：

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

【问题讨论】：

如果您需要帮助，请提供一些代码。

如果我点击 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;