CODEWITHSUNDEEP
reactjsfluentui-react
Muirik
Muirik

Reputation: 6289

Adding Function Reference to IconProps in React App

In my React app I am using react-fluent-ui to handle a lot of the styling. In one block in my class-based component I am using a TextField for a filter element. I have also included a clear icon within the TextField so that the user can click it to clear the text from the input field. What I'm running into a block on is how to include a reference to a function within the block of code where the icon is. Note, the onClick needs to be on the icon specifically, not on the TextField. This is the block of code:

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

And the iconProps referenced above look like this:

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

When I try to add the function to the clearIconProps using fat arrow syntax, like so, I have a syntax error: (Parsing error: Unexpected token):

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

I also tried this, but it also causes a syntax error: (Parsing error: Unexpected token):

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

And for the record, at the moment, clearFilter() looks like this:

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

How can I add the function to the icon within the TextField?

Upvotes: 3

Views: 1454

Answers (2)

Ravi Ojha
Ravi Ojha

Reputation: 168

As suggested by @NiceToMeetYou, This piece of code is wrong:

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

Now it becomes something like this:

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

We will have to do something like this, to achieve => 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>
    );
  }
}

Here is the complete code for the same: codepen

Upvotes: 2

Dong0321
Dong0321

Reputation: 121

Fluent UI does not support the click event from icon on TextField. You should create a function manually... Try to do as the following.

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 }
       />
      ...

Upvotes: 0

Related Questions