在输入焦点更改React中的父类

时间:2017-08-10 18:13:57

标签: javascript reactjs

当您点击输入字段或关注它时,我正在尝试在输入字段的父级上切换类。我面临两个问题。首先,为什么我的onFocus在没有我甚至点击字段内部的情况下调用渲染?其次,我是否需要为每个输入字段单独使用isActive状态,还是有更好的方法?我问,因为我的表单可能有更多的输入字段。我需要一个状态来为每个人捕获价值。这是否意味着每个输入需要两个状态?

export default class ContactForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: false
  }

  onFocus(e) {
    console.log(e);
    // setState for each input field here.
  }

  render() {
    return (
        <div className="contact-form">
          <h2>Contact Form</h2>
          <form>
            <div className={isActive ? 'textfield is-focused': 'textfield'}>
              <label htmlFor="inputName">Name</label>
              <input type="text" 
                     id="inputName 
                     ref="_name" 
                     onFocus={this.onFocus('name')} 
              />
            </div>
            <div className={isActive ? 'textfield is-focused': 'textfield'}>
              <label htmlFor="inputEmail">Email</label>
              <input type="email" 
                     id="inputEmail" 
                     ref="_email" 
                     onFocus={this.onFocus('email')} />
            </div>
            <input type="submit" value="send message" />
          </form>
        </div>
    );
  }
}

2 个答案:

答案 0 :(得分:1)

要先回答第二个问题,它会立即渲染,因为您需要将方法绑定到this - 所以您的代码看起来就像这样。

<input type="text" 
                 id="inputName 
                 ref="_name" 
                 onFocus={this.onFocus('name').bind(this)} 
          />

或者,您可以将它放在构造函数中,这通常更清晰。

export default class ContactForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: false
  }

  this.onFocus = this.onFocus.bind(this);
}

要回答你的第一个问题,是的,你现在设置它的方式,你必须为每个输入都有一个单独的布尔值。有更好的方法,只需尝试使用CSS。

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

答案 1 :(得分:1)

首先,如果您不想在渲染上调用onFocus:

onFocus={() => this.onFocus('email')}