引言
在React中要糊，如果要獲得 Input 等輸入的內(nèi)容萎胰，只能通過監(jiān)聽事件中的 event 對象獲得碾盟，但如果想傳遞更多的信息，則會使用二層函數(shù)進(jìn)行包裝技竟。類似這樣: <Input onChange={e => this.onInput(e, sth)}>.但是在不知道參數(shù) sth 傳錯的情況下冰肴，onInput 函數(shù)總接收 sth 為到 undefined 時，此時就只能另辟蹊徑，在 event 對象上做文章了熙尉。
正文
先看在 React 中联逻，怎么獲得 Input 輸入內(nèi)容:
<Input onChange={ this.onInput }>
onInput = e => {
const value = e.target.value
...
}
那如果頁面上有 n 個輸入框，像下面這樣
const list = [{name: '蘋果', value: ''}, {name: '橘子', value: ''}, {name: '梨', value: ''}]
list.map(n => <div><span>{n.name}</span><Input onChange={ this.onInput }></div>)
onInput = e => {
const value = e.target.value
...
}
怎么將輸入框輸入更新到對應(yīng)的位置 ?
要在 event 上做文章的話检痰，其實可以從獲取輸入值e.target.value找到解決思路包归，將要傳遞的參數(shù)掛載到 event.target對象上就可以了。先要看一下 event.target 對象是什么. event.target 是DOM節(jié)點铅歼。所以我們只需要在 Input 輸入框中添加屬性就可以了公壤。像下面這樣
const list = [{name: '蘋果', value: ''}, {name: '橘子', value: ''}, {name: '梨', value: ''}]
list.map((n, idx) => <div><span>{n.name}</span><Input onChange={ this.onInput } data-position = {i}></div>)
onInput = e => {
const position = e.target.data.position
list[position].value = e.target.value
}
這里為什么用 data- 屬性，是因為 data- 是js DOM樹上的一個節(jié)點椎椰。
HTML 元素的自定義屬性掛載到 DOM 的 attributes 屬性中厦幅。需要使用 n.target.attributes 獲取。
n.target.attributes.sth
并且獲得的值為字符串慨飘，需要截取字符串才能獲得有效數(shù)據(jù)确憨。
效果圖
image
