Reactjs React/Redux表单-获取焦点上的输入ID并设置状态

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

为了防止每次输入文本时都添加新的textarea（例如，如果有3个textarea，用户在第一个文本中聚焦并更改文本），我将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>
    );
  }

handleFocus=（e）=>{
console.log（e）；//我可以在这里获取ID吗？
if（this.state.activeBulletPointId！==selectedBulletPointId）{
this.setState（{activeBulletPointId:selectedBulletPointId}）；
}
}
render（）{
常量bulletList=this.state.data.map（（bulletPoint）=>{
const reduxFormName=`${this.props.placeholder}-${bulletPoint.id}`；
返回(
);
});
返回(
{公告列表}
);
}

---

组件是呈现我的redux表单的组件。

您可以为每个字段创建一个处理程序。所以您应该避免将数据作为属性保存在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>
    );
  }

setActiveBullet=activeBulletPointId=>{
if（this.state.activeBulletPointId！==activeBulletPointId）{
this.setState（{activeBulletPointId}）；
}
}
render（）{
常量bulletList=this.state.data.map（（bulletPoint）=>{
const reduxFormName=`${this.props.placeholder}-${bulletPoint.id}`；
返回(
this.setActiveBullet（bulletPoint.id）}
handleKeyPress={this.handleKeyPress（reduxFormName）}
handleKeyDown={this.handleKeyDown}
诺拉贝尔
/>
);
});
返回(
{公告列表}
);
}

您看过

现场阵列了吗？这正是它的用途