Question

我正在制作一个包含<input type="text">组件的React组件。问题是，当我输入一个单词时，<input>失去了焦点，我必须再次点击它并再次输入并再次失去焦点...

我使用了自定义<InputText>组件，通过value道具设置其值，并通过onChanged道具获取其更改的值。

我多次使用这种方法，但不知道它现在不起作用。

以下是我的主要内容：

import React from 'react';
import uniqueid from 'lodash.uniqueid';

import InputText from '../shared/InputText';

class EditCategories extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      categories: [
        {"category": 1},
        {"category": 2},
      ],
      num: 2,
    };
  }
  render () {
    return(
      <div id="categories">
        {this.renderCategoryInput()}
      </div>
    );
  }
  renderCategoryInput() {
    let categoryInputList = [];
    let i = 0;
    while(i < this.state.num) {
      categoryInputList.push(
        <div className="form-group" key={uniqueid('key-')}>
          <label className="col-sm-2 control-label">Cat {i + 1}</label>
          <div className="col-sm-4">
            <InputText
              field='category'
              type='text'
              id={uniqueid('category-')}
              className='form-control'
              value={(this.state.categories[i]) ? this.state.categories[i].category : ''}
              onChanged={this.handleChange.bind(this, i)}
              />
          </div>
          <span
            className="glyphicon glyphicon-plus"
            onClick={this.addCategoryInput.bind(this)}>
          </span>
          <span
            className="glyphicon glyphicon-minus"
            onClick={this.removeCategoryInput.bind(this, i)}>
          </span>
        </div>
      );
      i++;
    }
    return categoryInputList;
  }
  handleChange(i, key, value) {
    let categories = this.state.categories;
    if(!categories[i]) {
      categories[i] = {};
    }
    categories[i][key] = value;
    this.setState({categories: categories});
    console.log(this.state.categories);
  }
  removeCategoryInput(i) {
    let categories = (this.state.categories) ? this.state.categories : [];
    categories.splice(i,1);
    this.setState({num: this.state.num - 1});
    this.setState({categories: categories});
    this.props.onChanged(categories, categories);
  }
  addCategoryInput() {
    this.setState({num: this.state.num + 1});
  }
};
EditCategories.contextTypes = {
  data: React.PropTypes.object.isRequired
};
export default EditCategories;

以下是<InputText>组件：

import React from 'react';

class InputText extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  render () {
    return(
      <input
        type={this.props.type}
        id={this.props.id}
        className={this.props.className}
        value={this.props.value}
        placeholder={(this.props.placeholder) ? this.props.placeholder : ''}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
  handleChange(ev) {
    this.props.onChanged(this.props.field, ev.target.value);
  }
};
InputText.propTypes = {
  field: React.PropTypes.string.isRequired,
  type: React.PropTypes.string.isRequired,
  onChanged: React.PropTypes.func.isRequired,
  id: React.PropTypes.string,
  value: React.PropTypes.string,
  className: React.PropTypes.string,
  placeholder: React.PropTypes.string,
};
InputText.contextTypes = {
  data: React.PropTypes.object.isRequired
};
export default InputText;

没有控制台错误/警告，我可以记录更改后的this.state.categories，一切看起来都很好。

有人可以帮忙吗？

Answer 1

我终于发现问题是key属性。由于我使用uniqueid()生成key，因此每次渲染时都会有所不同。将其更改为静态值后，一切都很好。

uniqueid()函数可能导致的另一个潜在问题是，如果通过它生成id，那么服务器呈现结果可能与客户端呈现结果不同，那么您将获得{{1}警告

当我在React中输入一个单词时，输入失去焦点

1 个答案: