reactjs - 如何使用反应在表格的开头添加一行

Question

A 已经创建了一个表和一个向该表添加一行的表单，它工作正常，但是我不想将行添加到底部，而是添加为第一行。

什么是最好的解决方案？如果需要，我可以添加更多代码。

这是表格文件中组件中的代码：

//code
constructor(props) {
   this.state = {

        categories: [],

    }
    this.addCategory = this.addCategory.bind(this);
  }

// code

 addCategory(id, slug, title) {
    this.setState(prevState => ({
      categories: [...prevState.categories, {id, slug, title }]
    }));
  }

<CategoryForm 
  addCategory={this.addCategory}  />

这是表格文件：

 handleSubmit(event) {
    event.preventDefault()
    const form = event.target;
    const id = ""
    const title = form.elements["title"].value;
    const slug = form.elements["slug"].value;
    this.props.addCategory( id, slug, title);
    form.reset();
      
  }

// code

render() {

  <Form onSubmit={this.handleSubmit} >

       <Button>Submit</Button>
   </Form>
}

标签： reactjs

Answer 1

您可以简单地将新行附加到状态数组的开头而不是结尾。

this.setState(prevState => ({
      categories: [{id, slug, title }, ...prevState.categories]
    }));