React/Redux 表单 - 获取输入 onFocus 的 ID 并设置状态

Question

我有一个只有一个文本区域的表单。当文本输入此文本区域时，应在当前文本区域下方显示一个新文本区域。如果这个新的文本区域输入了文本，那么下面会再次显示另一个新的文本区域（一直……）。

为了防止每次输入文本时都添加新的文本区域（例如，如果有 3 个文本区域并且用户关注并更改第一个文本），我将 activeBulletPointId 存储在我的状态中，当在其中输入了文本我正在检查它是否是数组中的最后一个项目符号点。

addNewBulletToEnd = () => {
    let lastBulletId = this.state.data.slice(-1);
    lastBulletId = lastBulletId[0].id;
    if (this.state.activeBulletPointId === lastBulletId) {
      const newBulletPoint = { id: this.generateId(), title: 'Click to add' };
      this.setState({ data: this.state.data.concat(newBulletPoint) });
    }
  }

我遇到的问题是，在呈现我的列表时，我不确定如何将 id 传递给 onFocus 函数。

handleFocus = (e) => {
    console.log(e); //Can I get the ID here?
    if (this.state.activeBulletPointId !== selectedBulletPointId) {
      this.setState({ activeBulletPointId: selectedBulletPointId });
    }
  }

render() {
    const bulletList = this.state.data.map((bulletPoint) => {
      const reduxFormName = `${this.props.placeholder}-${bulletPoint.id}`;
      return (
        <div key={bulletPoint.id} className="bullet-point-input">
          <SelectInputType
            placeholder={reduxFormName}
            type="textarea"
            onChange={this.updateText}
            onFocus={this.handleFocus}
            handleKeyPress={this.handleKeyPress(reduxFormName)}
            handleKeyDown={this.handleKeyDown}
            noLabel
          />
        </div>
      );
    });

    return (
      <div className="bullet-point-list">
        {bulletList}
      </div>
    );
  }

<SelectInputType> 组件呈现我的 redux-form <Field> 组件。

Answer 1

您可以为每个字段创建一个处理程序。因此，您将避免将数据保存在 DOM 中（作为属性）并将其保存在处理程序的范围内。

除非您有数百个字段，否则这不会影响整体性能。

setActiveBullet = activeBulletPointId => {
    if (this.state.activeBulletPointId !== activeBulletPointId ) {
      this.setState({ activeBulletPointId });
    }
  }

render() {
    const bulletList = this.state.data.map((bulletPoint) => {
      const reduxFormName = `${this.props.placeholder}-${bulletPoint.id}`;
      return (
        <div key={bulletPoint.id} className="bullet-point-input">
          <SelectInputType
            placeholder={reduxFormName}
            type="textarea"
            onChange={this.updateText}
            onFocus={() => this.setActiveBullet(bulletPoint.id)}
            handleKeyPress={this.handleKeyPress(reduxFormName)}
            handleKeyDown={this.handleKeyDown}
            noLabel
          />
        </div>
      );
    });

    return (
      <div className="bullet-point-list">
        {bulletList}
      </div>
    );
  }

React/Redux 表单 - 获取输入 onFocus 的 ID 并设置状态

React/Redux Form - get ID of input onFocus and set state

reactjs

redux-form