在按钮上添加和删除HTML元素点击反应

什么是最好的简单实现这个jQuery的方式fiddle只使用React而不使用jQuery或任何其他库？我还没有很好的ReactJS技能，并且想知道是否有办法动态地创建和删除元素。在按钮上添加和删除HTML元素点击反应

我想创建一个

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

状态变量数组添加时保存的HTML，给基于索引每一个独特的密钥，然后.MAP（），但我不确定是否有一个更简单的方法来实现这一点，我不确定如何删除每个元素。

想了解任何帮助或反馈，谢谢！

来源

2016-11-19 Bryan

这是一个“反应”的方式来做到这一点，我不是一个React专家，所以代码可能会更好，会接受更正。

是的，反应有更多的样板代码，因为你不直接处理DOM，并且有更少的“魔术”，这意味着你有更多的控制权。
国家应尽可能最小化，您只需保存纯数据，其他装饰性的东西让组件来处理它们。
取决于具体情况，您可能需要将组件分成两个独立的组件，并使用更多的道具。
???更多建议？

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; 
 
    rows[idx].value = e.target.value; 
 
    this.setState({ 
 
     rows, 
 
    }); 
 
    } 
 
    
 
    onChecked(idx){ 
 
    const rows = this.state.rows; 
 
    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, i) => !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/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"> </div>

来源

2016-11-19 10:01:08 Kossel

在按钮上添加和删除HTML元素点击反应

回答

相关问题