Question

当您点击输入字段或关注它时，我正在尝试在输入字段的父级上切换类。我面临两个问题。首先，为什么我的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>
    );
  }
}

Answer 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

Answer 2

首先，如果您不想在渲染上调用onFocus：

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

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

2 个答案: