使用react-visjs-timeline,如何调用Timeline组件的方法？

方法如:

• timeline.fit();
• timeline.setItems({...});
• timeline.focus(id);

我在组件中添加了一个引用,但我不确定调用方法的项目:

<Timeline
  ref={this.timelineWrapperRef}
  options={this.state.options}
  items={this.state.items}
/>

在对文档react-visjs-timeline没有提及如何调用方法.

我正在尝试模拟将数据检索到组件的fetch（）。

我正在使用它作为模拟提取的模型，但是我无法使其正常工作。

运行测试时出现此错误： babel-plugin-jest-hoist: The module factory of 'jest.mock()' is not allowed to reference any out-of-scope variables.

有没有办法让这些函数返回模拟数据，而不是实际尝试进行真正的API调用？

码

utils / getUsers.js

返回角色映射到每个用户的用户。

const getUsersWithRoles = rolesList =>
  fetch(`/users`, {
    credentials: "include"
  }).then(response =>
    response.json().then(d => {
      const newUsersWithRoles = d.result.map(user => ({
        ...user,
        roles: rolesList.filter(role => user.roles.indexOf(role.iden) !== -1)
      }));
      return newUsersWithRoles;
    })
  );

组件/UserTable.js

const UserTable = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    getTableData();
  }, []);

  const getTableData = () => { …

快速总结

我正在尝试创建一个既具有常规单击又具有单独操作的按钮，该按钮在用户单击并按住时会发生，类似于Chrome中的“后退”按钮。

我这样做的方式涉及一个setTimeout()带有回调的回调，该回调检查状态。由于某种原因，回调从调用之时开始使用状态setTimeout()，而不是在调用回调时（1秒后）使用状态。

您可以在codesandbox上查看

我如何做到这一点

为了获得此功能，我打电话给setTimeOut()onMouseDown。我还将状态中的isHolding设置为true。

onMouseUp我将isHolding设置为false，然后运行clickHandler()，这是一个道具，如果hold函数没有时间被调用。

回调setTimeOut()将检查isHolding是否为true，如果为true，则它将运行clickHoldHandler()，这是一个支持。

问题

isHolding处于状态（我正在使用钩子），但是在setTimeout()触发它的回调时，我没有返回当前状态，而是setTimetout()第一次调用该状态时的状态。

我的代码

这是我的做法：

const Button = ({ clickHandler, clickHoldHandler, children }) => {
  const [isHolding, setIsHolding] = useState(false);
  const [holdStartTime, setHoldStartTime] = useState(undefined);
  const holdTime = 1000;

  const clickHoldAction = e => {
    console.log(`is holding: ${isHolding}`);
    if (isHolding) {
      clickHoldHandler(e);
    }
  };

  const onMouseDown = e => {
    setIsHolding(true);
    setHoldStartTime(new Date().getTime());

    setTimeout(() …

我正在使用 Grommet v2 组件并尝试镜像 Grommet 故事书中 Select 'Seasons' 示例中使用的显示。

该字段显示如下：

不同之处在于我的数据需要将标签和值分开：

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

而不是使用默认值：

const Options = [
  "S01",
  "S02",

这是Codesandbox上的示例

对象格式在 Grommet 的故事书中的 ObjectMultiSelect 示例中使用。我发现 Select 组件需要 labelKey="label"并将valueKey="value"对象加载为选项，但是添加这两个道具似乎破坏了组件选项。

我希望传入的数据类似于

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

并且仍然有如上显示的选项。

目标

我想创建一个带有滚动体和粘性标题的表。表标题单元格的宽度需要匹配其对应的正文列宽度。

它在React中，并且Table组件包含两个单独的组件（一个用于标题，另一个用于主体中的行）。组件的内容将来自外部来源，因此我无法对任何宽度进行任何假设。表格的主体将包含很多行，因此表格标题将需要保持粘性并保持在顶部。

问题

虽然表主体中列的宽度是自动设置的，但表头中的宽度不会自动设置。需要根据表的内容自动设置表标题的宽度。

您可以在此处查看问题和我的测试代码：https : //codesandbox.io/s/y0jx5rp081

注意事项

• 如果有足够的理由，我愿意使用插件或库，但如果可能的话，我宁愿不使用
• 我已经尝试过react-sticky，它不支持表格格式
• 我还尝试了react-sticky-table，这不允许我将表拆分为行组件，这是我需要做的，以帮助更有效地呈现
• 再一次，我需要所有宽度自动设置。到目前为止，我看到的唯一解决方案包括手动设置标题中的宽度

我目前正在使用Jest＆react-testing-library测试输入。我试图测试每当输入字段更改时onChange函数是否会触发。这是我的代码示例：

const placeHolder = 'first name';
const onChange = jest.fn();

test('<InputText/>', () => {

  const {getByPlaceholderText} = render(
    <InputText placeholder={placeHolder} onChange={onChange} />
  );

  const input = getByPlaceholderText(placeHolder);

  fireEvent.change(input, {
    target: {value: 'pls work'},
  });

  expect(onChange).toHaveBeenCalledTimes(1);
});

这是运行此测试时在终端上获得的东西：

expect(jest.fn()).toHaveBeenCalledTimes(1)

Expected mock function to have been called one time, but it was called zero times.

我在其他测试中使用了fireEvent.click（）函数，但没有任何问题，但是fireEvent.change（）似乎对我不起作用。

我目前正在为我正在从事的项目运行一些测试，但在使用fireEvent.select()这种方法专注于输入字段时遇到了麻烦。

到目前为止，我的测试：

it('is not working :(', () => {
  const input = queryByPlaceholderText('blah');

  fireEvent.change(input, {
    target: {value: 'some text'},
  });

  expect(input).toHaveAttribute('value', 'some text');

  fireEvent.select(input); <-- issue here
});

我正在测试的组件具有一个下拉菜单，该菜单仅在输入集中时才显示，但似乎fireEvent.change()也不fireEvent.select()在现场。我知道这会fireEvent.change()改变输入值。

到目前为止，我已经尝试过：

• fireEvent.click()
• fireEvent.focus()
• fireEvent.select()
• input.focus()

但这些选项均无效。

我需要能够在此下拉菜单中选择一个选项，以便能够正确测试组件。

TL; DR

有没有一种方法可以专注于RTL的输入字段？

目标

我目前正在尝试使用React-Transition-Group对表的行进出进行动画处理。可能会发生两种不同的情况：

• 表的全部内容将被交换（最常见的选项）
• 可以添加和删除单独的行

我现在在哪里

我使用此待办事项列表示例作为制作表格动画的起点。这是我的沙箱。

我的主要问题是当表数据被完全换出时，您可以同时看到两个数据集。当新数据滑入时，旧数据滑出。这会导致旧数据在过渡时向下移动（见下图）。

理想情况下，初始表数据在新数据进入之前会完全消失，但新数据会在旧数据存在时弹出。

代码

通过行映射的 Table Prop

  <table>
    <TransitionGroup component="tbody">
      {this.props.tables[this.props.currentTable].rows.map((row, i) => {
        return (
          <CSSTransition
            timeout={500}
            classNames="SlideIn"
            key={`${row}-${i}`}
          >
            <tr>
              {row.map((column, i) => {
                return <td>{column}</td>;
              })}
            </tr>
          </CSSTransition>
        );
      })}
    </TransitionGroup>
  </table>

更改表数据集的函数：

  changeTable = () => {
    this.setState({
      currentTable:
        this.state.currentTable < this.state.tables.length - 1
          ? this.state.currentTable + 1
          : 0
    });
  };