在按钮上添加和删除HTML元素点击反应
问题描述:
什么是最好的简单实现这个jQuery的方式fiddle只使用React而不使用jQuery或任何其他库?我还没有很好的ReactJS技能,并且想知道是否有办法动态地创建和删除元素。在按钮上添加和删除HTML元素点击反应
我想创建一个
this.state = { "inputs": ["<input type="text" /><input type="checkbox" />"] }
状态变量数组添加时保存的HTML,给基于索引每一个独特的密钥,然后.MAP(),但我不确定是否有一个更简单的方法来实现这一点,我不确定如何删除每个元素。
想了解任何帮助或反馈,谢谢!
答
这是一个“反应”的方式来做到这一点,我不是一个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>