Question

我正在使用reactsjs。我有一个表，它基于单击按钮添加行。行也被添加到行数组中。添加该行后，其中有一个按钮，单击该按钮将删除该行。这就是我开始工作的需要。行与数组一样存储在数组中。我通过查看示例进行了尝试。通过我的尝试，不正确的行被删除。

这是我尝试的代码：

public function registerAction(Request $request)
{
    $user = $this->userManager->createUser();
    $user->setEnabled(true);

    $event = new GetResponseUserEvent($user, $request);
    $this->eventDispatcher->dispatch(FOSUserEvents::REGISTRATION_INITIALIZE, $event);

    if (null !== $event->getResponse()) {
        return $event->getResponse();
    }

    $form = $this->formFactory->createForm();
    $form->setData($user);

    $form->handleRequest($request);

    if ($form->isSubmitted()) {
        if ($form->isValid()) {
            $event = new FormEvent($form, $request);
            $this->eventDispatcher->dispatch(FOSUserEvents::REGISTRATION_SUCCESS, $event);

            $this->userManager->updateUser($user);

            if (null === $response = $event->getResponse()) {
                $url = $this->generateUrl('fos_user_registration_confirmed');
                $response = new RedirectResponse($url);
            }

            $this->eventDispatcher->dispatch(FOSUserEvents::REGISTRATION_COMPLETED, new FilterUserResponseEvent($user, $request, $response));

            return $response;
        }

        $event = new FormEvent($form, $request);
        $this->eventDispatcher->dispatch(FOSUserEvents::REGISTRATION_FAILURE, $event);

        if (null !== $response = $event->getResponse()) {
            return $response;
        }
    }

    return $this->render('@FOSUser/Registration/register.html.twig', array(
        'form' => $form->createView(),
    ));
}

一段代码：

constructor() {
    super();
    this.state = {
      tasks: []
    }
    this.handleDeleteRow = this.handleDeleteRow.bind(this);
  }

handleDeleteRow(i) {
    let rows = [...this.state.rows]
    rows.splice(i, 1)
    this.setState({ 
      rows: rows
    })
  }

Answer 1

答案取决于您如何呼叫handleDeleteRow。

在您的评论中，您提到这是您的通话：

<a onClick={this.props.handleDeleteTask.bind(this)} > delete row </a>

尝试以下方法：

<a onClick={i => this.handleDeleteRow(i)}>Delete Row</a>

但是您必须确保始终使用相同的变量名。您可以在原始代码段中定义state.tasks，然后在Delete函数中设置state.rows，并在render函数中交替调用map上的rows（为此，我可以仅假设您正在从{rows} = this.state之类的状态中破坏此变量，但随后调用了（至少对我们而言）尚未定义的名为handleDeleteTask的函数。

要想看这项工作，就必须在整个过程中保持一丝不苟。

Answer 2

我相信问题出在钥匙上。当您拥有数组[a, b, c]并删除了a时，则在新数组[b, c]中，键对应于错误的项目。请为您的桌子找到更好的钥匙。

ReactJs如何从表中删除行？

2 个答案: