使用React而不使用jQuery或任何其他库,实现此jQuery fiddle的最佳简单方式是什么?我还没有完全具备ReactJS技能,并且想知道是否有办法动态创建和删除元素。
我在想创建一个
this.state = { "inputs": ["<input type="text" /><input type="checkbox" />"] }
状态变量数组,在添加HTML时保存HTML,根据索引给每个人一个唯一的键,然后是.map()它,但我不确定是否有更简单的方法来实现这一点,我不确定如何删除每个元素。
非常喜欢任何帮助或反馈,谢谢!
答案 0 :(得分:8)
这是一种“React”方式,我不是React专家,所以代码可能更好,会接受更正。
Row
组件分成两个具有更多道具的独立组件。
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>
答案 1 :(得分:1)
只需使用旧的普通JS方式
var elem = document.getElementById("button_" + id);
elem.parentNode.removeChild(elem);
答案 2 :(得分:0)
在我看来,将要创建的元素保存在变量中。每次你想创建一个元素 push() 到一个数组中,然后通过数组映射它来渲染它,如果你想删除你可以使用 pop() 删除数组中的最后一项。
注意:当元素是一个字符串时,你必须使用危险的SetInnerHTML来渲染它。
快乐编码!