I wrote this with simply using append and cloneNode() method, which is definitely not a good implementing. The refresh() made it splash when swiping, and swipe right doesn’t work well because the children index will change if trying to use insertBefore() method.
Based on the ons-carousel index not able to tell what happened to dynamic children items, I think this really hard to do so unless change the core of it.
Or does anyone has a better idea?

@misterjunio:
Hey!
The click of a button works. So I think it probably because the inner input element is rendered after all the other DOM is ready…?

export default class InputDemo extends Component {
  componentDidMount() {
    console.log(document.getElementById(('input1')));// null
  }

  log(){
    console.log(document.getElementById(('input1')));// works fine
  }

  render() {
    return(
        <div>
          <Input inputId="input1" />
          <button onClick={this.log}>Log</button>
        </div>
    )
  }
}

@songkeys:
Additionally, the reason why i try to target the inner <input> element is that i wanna set the font-size in the input box.
You can try to specify the fontSize css on the <Input> element. The wrapper changes its size but the inner text doesn’t…

document.getElementById('id') doesn’t work when the inputId is set. (The inputId works indeed.)
Could anyone tell me why and how to solve this… thx

Here is my code:

export default class InputDemo extends Component {
  componentDidMount() {
    console.log(document.getElementById(('input1')));// null
  }
  render() {
    return(
        <div>
          <Input inputId="input1" />
        </div>
    )
  }
}

The interesting thing is that i can get this work by typing document.getElementById(('input1') in the browser console.
So i guess the id is set after componentDidMount…? So strange…