獲取元素同級價值陣營

我有一個陣營組成部分（這是我後來傳遞給render（）方法），這裏面的方法：獲取元素同級價值陣營

renderNutrientInputs: function (num) { 
    var inputs = []; 
    for (var i =0; i < num; i++) { 
     inputs.push(<div key={i}> 
      <label>Nutrient name: </label><input type="text"/> 
      <label>Nutrient value: </label><input type="text" /> 
     </div>); 
    } 

    return inputs; 
}

我試圖對「營養價值」的每一個變化文本框，以獲取「營養素名稱」文本框的當前值。我首先雖然給他們兩個分配了「ref」，但我想他們可能在頁面上有多對（並且唯一的方法是通過鍵來識別它們）。我也嘗試過這樣的事情：

<label>Nutrient name: </label><input type="text" ref="nutName"/> 
<label>Nutrient value: </label><input type="text" onChange={this.handleNutrientValueChange.bind(null, ReactDOM.findDOMNode(this.refs.nutName))}/>

但有一個警告陣營：

警告：AddForm正在訪問getDOMNode或findDOMNode其內部渲染（）。 render（）應該是道具和狀態的純函數。它不應該訪問的東西，需要從以前的陳舊數據呈現

是否有某種方式附着onChange事件偵聽器，以營養價值文本框和訪問事件監聽器「營養名」文本框的當前值功能？

來源

2016-02-11 daremkd

您不想直接訪問DOM元素。沒有必要這樣做......使用您的數據，忘掉DOM！

你想要的是「聽取第n個營養素的變化，我想知道它的名稱和價值」。您需要將數據存儲在某個地方，比如在本例中的state。

執行getInitialState方法。讓我們從空陣列開始，讓用戶添加營養素。

getInitialState() { 
    return { nutritients: [] }; 
},

在render方法，讓用戶通過點擊「+」添加營養，讓我們說

addNutritient() { 
    const nutritients = this.state.nutritients.concat(); 
    nutritients.push({ name: "", value: undefined }); 
    this.setState({ nutritients }); 
}, 

render() { 
    return (
     <div> 
      <div onClick={this.addNutritient}>+</div> 
     </div> 
    ) 
}

好吧，讓我們專注於渲染和更新的營養素：

addNutritient() { 
    const nutritients = this.state.nutritients.concat(); 
    nutritients.push({ name: "", value: undefined }); 
    this.setState({ nutritients }); 
}, 

renderNutritients() { 
    const linkNutritient = (idx, prop) => { 
     return { 
      value: this.state.nutritients[idx][prop], 
      requestChange: (value) { 
       const nutritients = this.state.nutritients.concat(); 
       nutritients[idx][prop] = value; 
       this.setState({ nutritients }); 
      }, 
     } 
    }; 

    const nutritients = []; 
    return (
     this.state.nutritients.map((props, idx) => (
      <div> 
       <input valueLink={linkNutritient(idx, "name")} /> 
       <input valueLink={linkNutritient(idx, "value")} /> 
      </div> 
     )) 
    ) 
}, 

render() { 
    return (
     <div> 
      { this.renderNutritients() } 
      <div onClick={this.addNutritient}>+</div> 
     </div> 
    ) 
}

編碼通過手，對於語法錯誤或類型抱歉。

編輯： 看看這方面的工作小提琴https://jsfiddle.net/Lfrk2932/
玩它，它會幫助你瞭解這是怎麼回事。
另外，看看文檔做出反應，特別是具有「valueLink」 https://facebook.github.io/react/docs/two-way-binding-helpers.html#reactlink-without-linkedstatemixin

來源

2016-02-11 14:05:31 Andreyco

我有一個非常困難的時間獲取您的密碼，仍然不知道ES6語法，我在寫ES5。 – daremkd

valueLink使用雙向綁定填充，也不熟悉該概念：/ – daremkd

查看更新的答覆。我添加了工作小提琴，加上鍊接到文檔，這將有助於你理解雙向綁定。基本上它是用一個道具來替換'value'和'onChange'道具，道具包含輸入的值和被調用來改變它的值的函數。 – Andreyco

我不喜歡使用2路與之反應是怎樣的一個通量反模式的結合。只需將onChange監聽器添加到您的輸入元素和setState。

你的狀態會是這樣的： {0：{nutrientName：XYZ，nutrientValue：123}， 1：{nutrientName：ABC，nutrientValue：456}}

所以，當你改變nutrientvalue 456要說654，你可以說它的對應名字是abc，反之亦然。

大約陣營整個事情是關於處理數據不是DOM :)

來源

2016-06-03 20:30:19

獲取元素同級價值陣營

回答

相關問題