How to get ref to the input?

I’m using this with material-ui like:

class Amount extends Component {
  render() {
    return <NumberFormat {...this.props} decimalScale={2} />
  }
}

render() {
            <TextField
              className={classes.textField}
              fullWidth={true}
              label="Amount"
              name="amount"
              onChange={this.onAmountChange}
              required={true}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">$</InputAdornment>
                ),
                inputRef: ref => this.trackRef('amount', ref),
                inputComponent: Amount
              }}
}

But I don’t get a ref to the actual input. How can I get the ref?

Edit: it seem that the omit help function isn’t copying a ref function if one is provided

[s-yadav]

ref attributes are not passed as props to the component See (https://reactjs.org/warnings/special-props.html). They are internally used by react.

I guess in your Amount component you have to manually pass ref . Something like

<NumberFormat ref={this.props. inputRef} {...resr} decimalScale={2} />

But in this case as well ref will not forward to actual input. I guess I also have to support something similar inputRef like TextField Component.

For now, you can use ReactDOM.findDOMNode(this.amountElm) to find the actual element if you have passed inputRef: ref => this.amountElm = ref

[mbrevda]

Whoa! This is awesome, thanks!