Semantic-ui-react: Ability to define custom refs

[dburles]

I have a basic form class component where I'd typically place a ref on an input field and then reference that within the onSubmit handler in order to do something like this.input.value = '' to clear the form field.
However, since ref's are handled internally by the wrapper components what's the best approach to take instead?

[levithomason]

Values should be cleared by setting the value prop to an empty string ''. This means each input would be a controlled component.

[levithomason]

Also, if you absolutely must have a ref to the input, you can still put a ref on the containing div and find the input:

<Input ref='input' />

const htmlInput = this.refs.input.querySelector('input')

The ref is spread on the div that wraps the input element.

[dburles]

Thanks @levithomason that makes sense

[levithomason]

No problem, let us know if something still doesn't work for you.

[lubegasimon]

I also need some help here @levithomason;
I want to turn some fields to be controlled by DOM itself (uncontrolled component)... below is my code that I think will paint the picture of my challenge...

am using react, typescript and semantic-ui

export default class EvaluationForm extends React.Component<Props, State> {
  public comment: React.RefObject<TextArea>;
  public details: React.RefObject<HTMLTextAreaElement>;

  constructor(props) {
    super(props);
    this.state = this.initialState();
    this.comment = React.createRef();
    this.details = React.createRef();
  }
....

so when I try to reference ```comment``` on ```ref``` prop in a semantic-ui ```TextArea``` element, it throws an error as shown in the picture