在 React App 中添加对 IconProps 的函数引用

Question

在我的 React 应用程序中，我使用 react-fluent-ui 来处理很多样式。在基于 class 的组件的一个块中，我使用 TextField 作为过滤器元素。我还在 TextField 中包含了一个 clear 图标，以便用户可以单击它来清除输入字段中的文本。我运行进入的块是如何在图标所在的代码块中包含对函数的引用。注意，onClick 需要专门在图标上，而不是在 TextField 上。这是代码块：

<TextField
  label="ID:"
  defaultValue={this.props.filters.id}
  onChange={this.onFilterById}
  styles={{ root: { maxWidth: 300 } }}
  borderless
  underlined
  iconProps={ clearIconProps }
/>

上面引用的 iconProps 看起来像这样：

const clearIconProps = {
  iconName: 'clear',
  cursor: 'pointer',
}

当我尝试使用粗箭头语法将函数添加到 clearIconProps 时，出现语法错误：（解析错误：意外标记）:

const clearIconProps = {
  onClick={() => clearFilter()},
  iconName: 'clear',
  cursor: 'pointer',
}

我也试过这个，但它也会导致语法错误：（解析错误：意外的令牌）：

const clearIconProps = {
  onClick={clearFilter},
  iconName: 'clear',
  cursor: 'pointer',
}

郑重声明，目前 clearFilter() 看起来像这样：

const clearFilter = () => {
  // Add code to clear field
  console.log('clearFilter() was triggered...');
}

如何将功能添加到 TextField 内的图标？

Answer 1

Fluent UI 不支持 TextField 上图标的点击事件。您应该手动创建一个函数... 尝试如下操作。

class YourComponent ... {
   constructor() {
       this.unifiedTextFieldId = xxx; // init textfield id
       ...
   }
   componentDidMount() {
      const textField = document.getElementById(this.unifiedTextFieldId);
      if(textField) {
          const inputEle = textField.getElementsByTagName('input')[0];
          inputEle.parentNode.childNodes[1].addEventListener('click', clearFilter);
      }
   }
   ...
   render() {
       return (
         ...
       <TextField
          id = {this.unifiedTextFieldId}
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this.onFilterById}
          styles={{ root: { maxWidth: 300 } }}
          borderless
          underlined
          iconProps={ clearIconProps }
       />
      ...

Answer 2

根据@NiceToMeetYou的建议，这段代码是错误的：

const clearIconProps = {
  onClick={clearFilter}, // This has to be corrected to onClick: clearFilter,
  iconName: 'clear',
  cursor: 'pointer',
}

现在变成这样了：

const clearIconProps = {
  onClick: clearFilter,
  iconName: 'clear',
  cursor: 'pointer',
}

我们将不得不做这样的事情，以实现 => Note, the onClick needs to be on the icon specifically, not on the TextField. This is the block of code:

class TextFieldBasicExample extends React.Component {
  constructor(props) {
    super(props);
  }
  
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    if (node instanceof HTMLElement) {
      const child = node.querySelector('i');
      child.addEventListener('click', () => console.log("Hello world"))
      console.log("I am here", child)
    }
  }
  
  render() {
    return (
      <Stack horizontal tokens={stackTokens} styles={stackStyles}>
        <Stack {...columnProps}>
          <TextField label="With an icons" iconProps={iconProps} />
        </Stack>
       </Stack>
    );
  }
}

这是相同的完整代码： codepen

在 React App 中添加对 IconProps 的函数引用

Adding Function Reference to IconProps in React App

reactjs

fluentui-react