React/Redux表單 - 獲取輸入的ID onFocus和設置狀態

我有一個單一的textarea表單。當文本輸入到這個文本區域時，應該在當前文本區域下顯示一個新的文本區域。如果這個新的文本區域有文本輸入，然後又一個新文本顯示在下面（以及在...上）。React/Redux表單 - 獲取輸入的ID onFocus和設置狀態

爲了防止每次輸入文本時添加新的textarea（例如，如果有3個textareas，並且用戶先關注並更改文本），我將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>成分是什麼使我的終極版形式<Field>組件。

來源

2017-08-01 GuerillaRadio

你看過'FieldArray'嗎？這正是它的目的http://redux-form.com/6.0.0-alpha.7/examples/fieldArrays/ – grgmo

您可以爲每個字段創建一個處理程序。所以你應該避免將數據保存在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> 
    ); 
    }

來源

2017-08-01 08:36:39

完全是我以後，謝謝Yury。 – GuerillaRadio

React/Redux表單 - 獲取輸入的ID onFocus和設置狀態

回答

相關問題