小编Fra*_*cis的帖子

听起来很简单，但尽管文档内容丰富，但我找不到这方面的 hello-world 示例。我能找到的最接近的是https://react-hook-form.com/advanced-usage中的“使用虚拟化列表”部分，但这依赖于另一个模块react-window，这会带来进一步的复杂性。

我想允许管理员用户创建、更新、删除具有各种属性的产品列表。

我当前在 JSX 中的代码如下所示，我想利用react-hook-form 中的错误处理等：

    <ol >
      {products.map((row, index) => (
            <li 
                className={index === selectedProductIndex ? "selected" : ""} 
                key={index} 
                id={index} onClick={handleSelectProduct}>
                {row.name}
            </li>
        ))}
    </ol>
    <form onSubmit={handleSaveProduct}>
           <p>Product name: </p>
              <input name="productName" type="text" value={selectedProductName} 
              onChange={handleEdit_name} />
               (... more properties to edit here)
                    
                  </form>

处理程序将 selectedProductName、selectedProductIndex 等的值保存在 useState 中，通过 axios 等保存在数据库中。我在 useState 中单独处理每个字段的值，我知道这是费力且粗暴的。

我正在使用最新版本的 create-react-app （在 package.json 中，“react”：“^17.0.1”）

我正在尝试使用react-test-library来测试一个应用程序，其中检查复选框会增加计数器。我已将问题归结为我能处理的最简单的形式。我试过 keyDown，点击...

文本需要 '2' 并收到 '0' ：

组件文件：

import React, { useEffect, useState  } from "react";

function App3() {
  const [counter, setCounter]= useState(0);
  const handleClickInCheckbox = (ev) => {
  setCounter(2)
  };

  return (
    <div className="App">
      <input type="checkbox" onChange={handleClickInCheckbox} id="chkbx" data-testid="ch1" ></input>
      <h1 data-testid="h1" >{counter}</h1>
    </div>
  );
}

export default App3;

测试文件：

import React from 'react';
import { render, act,  screen, fireEvent,  getByRole} from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import App from '../App3'

describe ('app', () => { …