React/Redux Form - 入力の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) }); 
    } 
    } 

私が持っている問題は、私のリストをレンダリングするとき、私はのonFocus機能にIDを渡す方法が不明だということです。

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のフォーム<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> 
    ); 
    }