Javascript Reactjs-从数组中动态添加、删除

我有一个组件，它接受输入并将其添加到列表中并显示：

import React, {Component} from 'react'
import {
    Form,
    Col,
    Label,
    FormGroup,
    Button,
    Alert,
    Input,
    Row,
} from 'reactstrap'

export default class NewSubreddit extends Component {
    constructor(props) {
        super(props)
        this.state = {rules: []}
    }

    addRule() {
        const rule = document.getElementById('new-rule').value
        if(rule) {
            this.setState(prev => ({
                rules: prev.rules.concat(rule),
            }))
        }
        console.log(this.state)
    }

    deleteRule(e) {
        e.preventDefault()
        console.log(e.target)
        // this.setState(prev => ({

        // }))
    }

    render() {
        return (
            <React.Fragment>
                <Form>
                    <FormGroup row>
                        <Label sm={2}>Rules</Label>
                        <Col sm={10}>
                            <Row>
                                <Col>
                                    <Input id='new-rule' type='text' placeholder='Add a rule that members of this community should follow!'/>
                                </Col>
                                <Col>
                                    <Button onClick={() => this.addRule()}>ADD RULE</Button>
                                </Col>
                            </Row>
                        </Col>
                    </FormGroup>
                    <FormGroup row>
                        <Col>
                            {this.state.rules.map((rule) => 
                                <Alert key={rule} isOpen={true} toggle={this.deleteRule}>{rule}</Alert>
                            )}
                        </Col>
                    </FormGroup>
                </Form>   
            </React.Fragment>
        )
    }
}

import React，{Component}来自“React”
进口{
类型
上校，
标签
FormGroup，
按钮
警觉的
输入
一行
}从“反应带”
导出默认类NewSubreddit扩展组件{
建造师（道具）{
超级（道具）
this.state={rules:[]}
}
addRule（）{
常量规则=document.getElementById（'new-rule'）。值
如果（规则）{
this.setState（prev=>({
规则：prev.rules.concat（规则），
}))
}
console.log（this.state）
}
删除规则（e）{
e、 预防默认值（）
console.log（例如target）
//this.setState（prev=>({
// }))
}
render（）{
返回(
规则
this.addRule（）}>添加规则
{this.state.rules.map（（rule）=>
{规则}
)}
)
}
}

因此，我可以将规则添加到

状态

中的数组

规则

这里我需要做两件事：

• 限制只创建固定数量的规则（例如4条）
• 通过切换警报来删除规则

---

我试图通过访问

event.target.value

来删除

deleteRule

函数，但它是

未定义的

您可以创建一个内联函数，将数组中规则的索引传递给

deleteRule

，而不是事件，并从您的状态中删除该规则

当您所在的州有4条或更多规则时，也可以隐藏“添加”按钮

示例

class NewSubreddit extends Component {

  // ...

  deleteRule(ruleIndex) {
    this.setState(previousState => {
      const rules = [...previousState.rules];
      rules.splice(ruleIndex, 1);
      return { rules };
    });
  }

  render() {
    return (
      <React.Fragment>
        <Form>
          <FormGroup row>
            <Label sm={2}>Rules</Label>
            <Col sm={10}>
              <Row>
                <Col>
                  <Input
                    id="new-rule"
                    type="text"
                    placeholder="Add a rule that members of this community should follow!"
                  />
                </Col>
                <Col>
                  {this.state.rules.length < 4 && (
                    <Button onClick={() => this.addRule()}>ADD RULE</Button>
                  )}
                </Col>
              </Row>
            </Col>
          </FormGroup>
          <FormGroup row>
            <Col>
              {this.state.rules.map((rule, index) => (
                <Alert
                  key={rule}
                  isOpen={true}
                  toggle={() => this.deleteRule(index)}
                >
                  {rule}
                </Alert>
              ))}
            </Col>
          </FormGroup>
        </Form>
      </React.Fragment>
    );
  }
}

class NewSubreddit扩展组件{
// ...
删除规则（规则索引）{
this.setState（previousState=>{
常量规则=[…previousState.rules]；
规则.拼接（规则索引，1）；
返回{rules}；
});
}
render（）{
返回(
规则
{this.state.rules.length<4&&(
this.addRule（）}>添加规则
)}
{this.state.rules.map（（规则，索引）=>(
this.deleteRule（index）}
>
{规则}
))}
);
}
}

您可以通过以下方法删除特定元素：

  deleteRule = (idx) => () => {
    this.setState({
        rules: this
            .state
            .rules
            .filter((s, sidx) => idx !== sidx)
    });
}

您必须按以下方式调用函数：

     <Col>
        {this.state.rules.map((rule,idx) => 
        <Alert key={rule} isOpen={true} toggle={this.deleteRule(idx)}>{rule} 
        </Alert>
         )}
      </Col>

{this.state.rules.map（（rule，idx）=>
{规则}
)}

---

希望此帮助

您可以使用最大数量的规则创建一些常量，并更新addRule函数

在构造函数中，您可以添加

this.maxNumberOfRules = 4;

然后更新

addRule() {
    const rule = document.getElementById('new-rule').value
    if(!rule || this.state.rules.length === this.maxNumberOfRules) {
        return null;
    }
    this.setState({rules: [...this.state.rules, rule]})
}

[…this.state.rules，rule]创建一个包含所有项+新项的新数组。 然后可以传递规则或规则索引以进行删除

{this.state.rules.map((rule, index) => 
    <Alert key={rule} isOpen={true} toggle={(e) => this.deleteRule(e, index)}>{rule}</Alert>
 )}

---

filter（）方法创建一个数组，该数组中填充了通过测试的所有数组元素（作为函数提供）。

您正在将delete函数添加到close按钮，它没有任何值。您需要为“Col”添加单击事件，或者可以将规则作为参数传递

<Col>
  {this.state.rules.map((rule) => 
    <Alert key={rule} isOpen={true} toggle={() => this.deleteRule(rule)}>{rule}</Alert>
  )}

我用stackblitz中的代码创建了一个简单的stack应用程序，请看一看

<Col>
  {this.state.rules.map((rule) => 
    <Alert key={rule} isOpen={true} toggle={() => this.deleteRule(rule)}>{rule}</Alert>
  )}

deleteRule(rule) {
    console.log(rule);
    // make a separate copy of the array
    var array = [...this.state.rules]; 
    var index = array.indexOf(rule);
    array.splice(index, 1);
    this.setState({rules: array});
}