在 React 中單擊按鈕添加和刪除 HTML 元素

Question

僅使用 React 而不使用 jQuery 或任何其他庫來實現此 jQuery小提琴的最佳簡單方法是什么？ 我還不太具備 ReactJS 技能，想知道是否有一種方法可以動態創建和刪除元素。

我正在考慮創建一個

this.state = { "inputs": ["<input type="text" /><input type="checkbox" />"] }

添加時保存 HTML 的狀態變量數組，根據索引為每個人提供一個唯一的鍵，然后 .map() 它，但我不確定是否有更簡單的方法來實現這一點，也不確定如何刪除每個元素.

希望得到任何幫助或反饋，謝謝！

Answer 1

這是一種“反應”方式來做到這一點，我不是反應專家，所以代碼可以更好，會接受更正。

• 是的，react 有更多樣板代碼，因為你不直接處理 DOM，而且“魔法”更少，這意味着你有更多的控制權。 （特別是作為受控組件）
• 狀態應該盡可能少，你只需要保存純數據，其他裝飾性的東西讓組件來處理它們。
• 視情況而定，您可能希望將Row組件分成 2 個具有更多道具的獨立組件。
• ？？？ 更多建議？

更新：在過去的 3 年里每天都在使用 React 之后，我發現以前的代碼有一些不好的做法，我已經更新了代碼，希望它可以幫助你。

 const Row = function(props){ const {checked, value, onChange, onChecked} = props; return ( <div> <input type="checkbox" checked={checked} onChange={onChecked} /> <input type ="text" value={value} onChange={onChange}/> </div> ); } class App extends React.Component { constructor(props){ super(props); this.state = { rows: [ {value: 'row1', checked: false}, {value: 'row2', checked: true}, {value: 'row3', checked: false}, ] }; } updateValue = (e, idx) => { const rows = [...this.state.rows]; // copy array because we don't want to mutate the previous one rows[idx].value = e.target.value; this.setState({ rows, }); } onChecked = (idx) => { const rows = [...this.state.rows]; // copy array because we don't want to mutate the previous one rows[idx].checked = !rows[idx].checked; this.setState({ rows, }); } addRow = () => { const rows = [...this.state.rows, {value:'', checked: false} ]; this.setState({ rows, }); } deleteRows = () => { this.setState({ rows: this.state.rows.filter(e => !e.checked) }); } render(){ return( <div> {this.state.rows.map((row, idx) => { return( <Row key={idx} value={row.value} checked={row.checked} onChange={(e) => this.updateValue(e, idx)} onChecked={() => this.onChecked(idx)} /> ) }) } <button onClick={this.addRow}> add </button> <button onClick={this.deleteRows}> delete </button> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script> <div id="app"> </div>

Answer 2

只需使用舊的純 JS 方式

 var elem = document.getElementById("button_" + id);
 elem.parentNode.removeChild(elem);

Answer 3

在我看來，將要創建的元素保留在變量中。 每次你想創建一個元素 push() 到一個數組中，然后通過數組映射它來渲染它，如果你想刪除你可以使用 pop() 刪除數組中的最后一項。

注意：當元素是字符串時，您必須使用危險的SetInnerHTML 來呈現元素。

快樂編碼！