如何为所需的消息输入和文本区域设置样式

Question

我目前正在使用 Reactjs 为我的网站创建一个联系页面，但是当我单击提交时，我将如何设置所需消息的样式？我希望消息直接显示在输入或文本区域下方，但我该怎么做？

相关代码

<form className='contact-form' onSubmit={this.handleSubmit}>
    Fields marked with an <span className='red'>∗</span> are required.
    <div className='form-item'>
        <label htmlFor="name">Name <span className='red'>∗</span></label>
        <input className='name'
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
            required />
    </div>
    <div className='form-item'>
        <label htmlFor="email">Email <span className='red'>∗</span></label>
        <input className='email'
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
            required />
    </div>
    <div className='form-item'>
        <label htmlFor="subject">Subject <span className='red'>∗</span></label>
        <input className='subject'
            type="text"
            name="subject"
            value={this.state.subject}
            onChange={this.handleChange}
            required />
    </div>
    <div className='form-item'>
        <label htmlFor="message">Message <span className='red'>∗</span></label>
        <textarea name='message'
            rows='8'
            value={this.state.message}
            onChange={this.handleChange}
            required />
    </div>
    <button className='btn' type='submit' disabled={this.state.disabled}>Submit</button>
    <div className={this.state.isSent ? 'message-open':'message'}>Message has been sent.</div>
</form>

Answer 1

您可以使用constraint validation API。有一个名为invalid 的伪类。 您可以在每个输入元素下放置一些用于此警告的文本​​，其中一个元素在 css 中设置为 visibility hidden。当您的约束为invalid 时，您可以将它们设置为visible。

small {
  visibility: hidden;
}

small:invalid {
  visibility: visible;
}

这适用于每个约束。如果您只需要这样做，您可以相应地选择它们。

input:required + small {
  visibility: hidden;
}

input:required + small:invalid {
  visibility: visible;
}