Question

我有两个输入，一个文本区域和三个标签。当输入或textarea位于焦点时，我想为标签上的某些动画添加一些类，但无法选择该特定标签。有没有办法做到这一点？这是一个代码

 <form onSubmit={this.handleSubmit}>
<div className="contact-form">
    <div className="contact-form_group">
        <label htmlFor="name" className={`contact-label name`}>
            Ime
        </label>
        <input onChange={this.handleChange} onFocus={this.handleFocus} id="name" value={this.state.name} className="contact-form_input" type="text" name="name" />
    </div>
    <div className="contact-form_group">
        <label htmlFor="email" className={`contact-label email`}>
            Email
        </label>
        <input onChange={this.handleChange} onFocus={this.handleFocus} id="email" value={this.state.email} className="contact-form_input" type="email" name="email" />
    </div>
    <div className="contact-form_group">
        <label htmlFor="message" className={`contact-label message`}>
            Message
        </label>
        <textarea className="contact-form_textarea" id="message" cols="3" rows="8" onChange={this.handleChange} onFocus={this.handleFocus} value={this.state.msg} name="msg" />
    </div>
    <Button className="button" type="submit" children="Send" />
</div>

Answer 1

如果您不担心浏览器的兼容性，则可以使用最先进的CSS选择器:focus-within

.contact-form > div:focus-within label
  color: red

但是我实际上还不建议这样做。它仍然是工作草案的一部分，并未得到广泛支持。

在react中，您可以跟踪活动元素的名称，并有条件地将render类应用于标签。因此onFocus / onBlur设置了focusedElement，例如

onFocus(e) {
  this.setState({focusedElement: e.currentTarget.getAttribute('name')})
}

然后在渲染中执行类似的操作

className={`contact-label name ${this.state.focusedElement === 'name' ? 'focused' : ''}`}

这是一个可行的示例-

class TodoApp extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        focusedElement: null
      };
    }

    onFocus(e) {
      this.setState({
          focusedElement: e.currentTarget.getAttribute('name')
          });
      }

      onBlur(e) {
        this.setState({
          focusedElement: null
        });
      }

      render() {
        return ( <
          div >
          <
          label className = {
            this.state.focusedElement === 'name' ? 'focused' : ''
          } > Label For Name < /label> <
          input name = 'name'
          type = 'text'
          onFocus = {
            this.onFocus.bind(this)
          }
          onBlur = {
            this.onBlur.bind(this)
          }
          />

          <
          label className = {
            this.state.focusedElement === 'other' ? 'focused' : ''
          } > Label For Other Value < /label> <
          input name = 'other'
          type = 'text'
          onFocus = {
            this.onFocus.bind(this)
          }
          onBlur = {
            this.onBlur.bind(this)
          }
          /> < /
          div >
        );
      }
    }

    ReactDOM.render( < TodoApp / > , document.querySelector("#app"))

.focused {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Answer 2

如果输入/文本区域成为焦点，则无需添加类让CSS成为可能。 CSS可以为您解决这个问题。

input:focus { 
    background-color: 'red'; // or do some animation here
}

Answer 3

您可以使用jquery npm install --save jquery

并使用jquery的addClass方法。

import $ from 'jquery'
 .....
<form onSubmit={this.handleSubmit}>
    <div className='contact-form'>
      <div className='contact-form_group'>
        <label htmlFor='name' className={`contact-label name`} id='l1' >Ime</label>
        <input onChange={this.handleChange}
               onFocus={()=>{$(#l1).addClass('classNameYouWantToAdd')}} id='name' 
               value={this.state.name} 
               className='contact-form_input' 
               type='text' name='name'/>
      </div>
      <div className='contact-form_group'>
        <label htmlFor='email' className={`contact-label email`} id='l2'>Email</label>
        <input onChange={this.handleChange} 
               onFocus={()=>{$(#l2).addClass('classNameYouWantToAdd')}} id='name' 
               id='email' value={this.state.email} className='contact-form_input' type='email' name='email'/>
      </div>
      <div className='contact-form_group'>
        <label htmlFor='message' className={`contact-label message`}>Message</label>
        <textarea className='contact-form_textarea' id='message' cols='3' rows='8' onChange={this.handleChange} onFocus={this.handleFocus} value={this.state.msg} name='msg'></textarea>
      </div>
      <Button className='button' type='submit' children='Send' />
    </div>
  </form>

Answer 4

React没有一种类似于这种方式来处理嵌套子组件的非常有效的方法。处理特定节点/子节点样式的最佳方法是使用类，然后使用CSS进行适当的样式设置。

在您的情况下，您将执行以下操作：

.contact-form_input:focus {
    background-color: #eee;
}

如果您想在悬停上添加一些样式或其他一些动画，可以通过类似的方式（使用CSS）来完成：

.contact-form_input:hover {
    background-color: #aaa;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}

像其他张贴者所建议的那样，将JQuery与ReactJS合并是不合适的。

Answer 5

onFocus有一个React合成事件。您可以在焦点更改时更新状态，并更改每个输入的className。

JSFiddle

        <div className="form__group">
                <label htmlFor="input1" className={focus === "input1" ? "focused__input" : "input"}>Input 1</label>
                <input name="input1" onChange={this._onChange.bind(this)} onFocus={this._onFocus.bind(this, "input1")}/>
            </div>

Answer 6

您可以定义对该标签的引用，并专注于您可以使用来获取该标签的值

//定义对标签的引用

//获取焦点更改事件上的标签对象，并相应地更新标签的类 var object = this.refs.labelName;

ReactJS如何选择同级并添加或删除他的className

6 个答案: