將唯一列表項添加到ReactJS中的DOM

我試圖用React創建待辦事項列表，並且已經非常接近。當我單擊按鈕時，我將<li>元素添加到dom中，但是我將輸入字段中的文本設置爲所有<li> s。我對React很陌生，有點困惑。將唯一列表項添加到ReactJS中的DOM

我該怎麼做？見代碼，並鏈接到codepen：

var ListContainer = React.createClass({ 
    getInitialState: function() { 
    return { 
     numChildren: 0, 
     text: null 
    }; 
    }, 
    onAddChild: function() { 
    var inputValue = document.getElementById('itemAdder').value; 
    console.log(inputValue); 
    this.setState({ 
     numChildren: this.state.numChildren + 1, 
     text: inputValue 
    }); 
    }, 
    render: function() { 
    var children = []; 
    for (var i = 0; i < this.state.numChildren; i++) { 
     children.push(<Item key={'item_' + i} number={i} text={this.state.text}/>); 
    }; 
    return (
     <List addChild={this.onAddChild}> 
     {children} 
     </List> 
    ); 
    } 
}); 

var List = React.createClass({ 
    render: function() { 
    return (
     <div id="listContainer"> 
     <p><input type="text" name="itemAdder" id="itemAdder" /></p> 
     <p><button type="button" onClick={this.props.addChild}>Add another item</button></p> 
     <ul> 
      {this.props.children} 
     </ul> 
     </div> 
    ); 
    } 
}); 

var Item = React.createClass({ 
    render: function() { 
    var key = this.props.index; 
    return (
     <li>{this.props.text}</li> 
    ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
    return (
     <div id="main" className="page-wrap"> 
     <ListContainer /> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <App/>, 
    document.getElementById('app') 
);

來源

2016-12-15 Ryan Mc

的問題得到它

你很接近，但問題是，當你正在構建的孩子在渲染方法列表中，對於你說每個項目的值都應該等於狀態內的文本鍵值。這就是爲什麼所有<li>都呈現相同的值。

解決方案

您的組件的狀態的設計是不正確。這是國家應該如何：

getInitialState: function() { 
    return { 
     numChildren: 0, 
     list: [] //this will an array of objects 
    }; 
}

的onAddChild方法應該是這樣的：

onAddChild: function() { 
    var inputValue = document.getElementById('itemAdder').value; 
    console.log(inputValue); 
    var newList = this.state.list.slice(); //Avoiding state mutation 
    newList.push(inputValue) 
    this.setState({ 
     numChildren: this.state.numChildren + 1, 
     list: newList 
    }); 
}

在此之後，當你costruct在渲染方法，孩子陣列根據相應的列表值相關聯for循環的索引是這樣的：

for (var i = 0; i < this.state.numChildren; i++) { 
    children.push(<Item key={'item_' + i} number={i} text={this.state.list[i]}/>); 
}

來源

2016-12-15 17:59:36 Swapnil

謝謝。完美工作 –

高興地幫助:) – Swapnil

當您添加一個新的項目，你是不是保存以前的附加價值，而不是要覆蓋本身的價值。

你應該在你的狀態下保存一個字符串數組。

onAddChild: function() { 
    var inputValue = document.getElementById('itemAdder').value; 

    this.setState({ 
     items: [...this.state.items, inputValue] 
    }); 
}

的numChildren的變量是沒有必要的，因爲你可以從items.length

來源

2016-12-15 17:56:02

但我沒有一個名爲items的狀態屬性。我會怎麼做？ –

您應該重新設計組件的狀態（調整getInitialState函數） –

將唯一列表項添加到ReactJS中的DOM

回答

相關問題