小编car*_*rke的帖子

React-Select v2逗号分隔搜索

react-select v2是否有办法一次搜索多个值?就像我可以让用户粘贴在逗号或空格分隔的值列表中,并且与这些结果匹配的项目将显示在下拉列表中。

示例react-select(我们称为项目选择器):

<StyledFormItemPicker
          className="emailPicker"
          filterKeys={['label']}
          label="email picker"
          value={emailPickerValue}
          onChange={value => onEmailPickerChange(value)}
          items={users}
          isMulti={true}
        />
Run Code Online (Sandbox Code Playgroud)

onChange代码:

// allow user to pass in comma separated list to search
export const onEmailPickerChange = props => event => {
  event.persist();
  // split event (value) on space or comma
  // push to an array
  // set that array of strings as the value and see all results?
};
Run Code Online (Sandbox Code Playgroud)

javascript multi-select reactjs react-select

5
推荐指数
1
解决办法
68
查看次数

如何向屏幕阅读器表明内容可内联编辑?

我的产品有一个我们想要显示默认值的区域(比如文档页面的名称),但是当用户关注它并点击空格键时,它变成了一个可编辑的字段。我们正在尝试编写可访问的代码,我想知道是否有人指导过如何使用屏幕阅读器向某人指示此内容是可编辑的?

我们目前在代码中处理它的方式是有一个带有名称的 div,当用户点击(或聚焦并点击空格键)时,它会变成一个输入。(他们可以点击回车或按钮进行保存。)我们可以利用这个或其他一些本地解决方案的 ARIA 值吗?

默认:

<div>Page title <button>Click to edit page title</button></div>
Run Code Online (Sandbox Code Playgroud)

编辑时:

<input maxlength="500" value="Page title" />
Run Code Online (Sandbox Code Playgroud)

我们现在没有保存按钮。您按 Enter 键或从输入中删除焦点,它会自动更新。

html accessibility screen-readers inline-editing

5
推荐指数
1
解决办法
598
查看次数

在玩笑中模拟 react ref 的当前值以进行浅层测试

我正在尝试模拟this.ref.current.value作为我的 React 组件中函数测试的一部分。当前current为空,因为我正在对我的组件进行浅安装。我试图找到一种方法来模拟current.value我的 ref 返回的内容,以便我可以测试函数的另一部分,refs 值是什么对于这个测试实际上并不重要。

实际功能:

copyDefinitionTarget = selectedInput => () => {
    // get and select the input value
    const copyText = this[`${selectedInput}`].current.value;

    // copy to clipboard
    navigator.clipboard.writeText(copyText);
  };
Run Code Online (Sandbox Code Playgroud)

测试代码:

it('calls navigator.clipboard appropriately to copy the text in copyDefinitionTarget', () => {
    component = shallow(<Alert {...props} />);

    component
      .dive()
      .find('Item')
      .dive()
      .find('Button')
      .simulate('click');

    expect(navigator.clipboard.writeText).toHaveBeenCalled();
  });
Run Code Online (Sandbox Code Playgroud)

测试失败:

TypeError: Cannot read property 'value' of null

      50 |     // get and select the input value …
Run Code Online (Sandbox Code Playgroud)

javascript ref reactjs jestjs enzyme

3
推荐指数
1
解决办法
8710
查看次数