3

在我的 React 应用程序中，我使用 react-fluent-ui 来处理很多样式。在我的基于类的组件的一个块中，我使用了TextField一个过滤器元素。我还在其中包含了一个clear图标，TextField以便用户可以单击它来清除输入字段中的文本。我遇到的一个问题是如何在图标所在的代码块中包含对函数的引用。请注意，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？

4

2 回答 2

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

于 2021-01-19T19:42:25.863 回答
0

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 }
       />
      ...
于 2021-01-19T19:09:18.250 回答