React.js删除特定元素
React.js删除特定元素
提问于 2019-03-01 04:05:47
我对react.js非常陌生，但我学到了很多东西。我有一个特定的问题，我正在努力解决。我希望能够选中复选框来删除动态创建的元素。
目前，我的代码设置为呈现多个元素，并且每次单击按钮时，该数字(处于元素状态)将加1。
显然，我可以只将state num减去1，但是我正在尝试删除一个特定的元素。
我如何尝试通过id删除特定的元素？
当前代码：
4 class FieldSection extends Component{
5 constructor(){
6 super()
7
8 this.state ={
9 numberOfFields: 1
10 }
11 }
12 addField = () => {
13 const { numberOfFields } = this.state;
14 this.setState({ numberOfFields: numberOfFields + 1 });
15 }
16
17 listFields = (numberOfFields) => {
18 var fields = [];
19 for(var i=0; i<numberOfFields; i++){
20 fields.push(
21 (<Field />)
22 )
23 setId();
24 }
25 return fields;
26 }
27
28 render () {
29 const {listFields, addField} = this;
30 const {numberOfFields} = this.state;
31 return (
32 <div>
33 <label><u>Fields</u></label>
34 {listFields(numberOfFields)}
35 <div id="fieldButtons">
36 <button id="addField" type="button" onClick={addField}> Add Field </butt on>
37 <button id="removeField" type="button"> Remove Field </button>
38 </div>
39 </div>
40 )
41 }
42 }回答 1
Stack Overflow用户
发布于 2019-03-01 04:41:17
检查这一点:开始以更正确的方式实现你想要做的事情：
class FieldSection extends Component{
constructor(){
super()
this.state ={
allFields: []
}
}
addField = () => {
this.setState({ allFields: getFieldId()});
}
removeField = (id) => {
//get new array if fields without element you want to delete
const editedArray = this.state.allFields.filter(num => num !== id)
this.setState({allFields: editedArray})
}
render () {
var fields = [];
for(var i=0; i<this.state.allFields; i++){
fields.push(<Field key={allFields[i]} id={allFields[i]}
deleteAction = (id)=> this.removeField(id)/>)
}
return (
<div>
<label><u>Fields</u></label>
{fields}
<div id="fieldButtons">
<button id="addField" type="button" onClick={addField}>Add Field </button>
<button id="removeField" type="button"> Remove Field </button>
</div>
</div>
)
}
}
//********Field Component************//
class FieldSection extends Component{
render() {
return (
<div>
<div id={this.props.id}>My field</div>
<div onClick={()=> this.props.deleteAcion(this.props.id}>Delete field</div>
</div>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54933441
复制相关文章
相似问题