[Solved]-ref does not work in this reactjs component-Reactjs

You're missing a few things here

First off, you're writing an ES6 component class and when using ES6 together with React, React no longer features auto binding of this making your call to handleCallback refer to a this which will be null.

this.handleCallback.bind(this) or declare your callback with an arrow function handleCallback = () => {} will take care of that problem.

And secondly, the way you're trying to set the className is not allowed, React only updates the tree (i.e., what you see) when re-rendering and React will never flush the changes you made 'inline' back into the DOM so you would have to utilize this.setState() or this.forceUpdate() in order to be able to see, but since your changes are inline they will never persist on a subsequent render.

Below is a very verbose Component to illustrate how to do it

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      shouldWiggle: false
    };
  }
  handleCallback() {
    this.setState({shouldWiggle: !this.state.shouldWiggle});
  }
  render() {
    let cls = this.state.shouldWiggle ? 'icon-up wiggle': 'icon-up';
    return (
      <div>
        <span className='highlight'>{this.props.summary}</span>
        <a  
          className='link'
          onClick={this.handleCallback.bind(this)}
        >   
          <span ref={(c) => this.icon = c} className={cls}>ad</span>
        </a>

      </div>
    );  
  }
}