如何在使用reactjs发送空值时使输入字段边框为红色

Question

我是新手，我的目标是当我们点击发送按钮时用红色显示边框，而不在输入文本字段中输入任何值。我不知道如何在材料ui中获得边框红色。我需要验证输入字段吗？如果是，那么我需要用字母和字母数字正则表达式进行验证吗？我在这里有点困惑。

这是代码：

<TextField
margin="dense"
fullWidth
variant="outlined"
placeholder="Enter a Message"
name="msg"
id="text"
/>
<Button onClick={this.handleSubmit}>Send</Button>

有人能帮我查询吗？

Answer 1

在TextField中添加一个值属性，提交后检查值属性是否为空，如果为空，则在TextField添加一个动态类。

state = { msg: "" }

在TextField属性中添加onChange和类名。

onChange = e => this.setState({ msg: e.target.value })
classname={this.state.msg !== "" ? "borderRed":""}