javascript - (reactjs) get child component value -

i have following react component timepicker:

export default class timepicker extends component{   render(){    return(      <div>       <input id={this.props.nameid} type="text"></input>       </div>);  } }   

timepicker used singletask:

export default class singletask extends component{    ....    render(){      ....      <timepicker nameid="time" />     .....   } } 

how can access input value in timepicker singletask?

you can solve in 2 ways:

1. only change in singletask component: add ref timepicker component , access it's dom. there can query input choice of jquery selector. here have used tag selector (note: there no dependency of jquery included).

:

export default class singletask extends component{    yourfunction(){     var selectedtime = react.finddomnode(this.refs.timepickercomp).queryselector('input').value;    }   render(){      ....      <timepicker ref="timepickercomp" nameid="time" />     .....   } }  

2. expose data through function of child component (the react way):

timepicker :

export default class timepicker extends component{ function getselectedtime(){  return document.getelementbyid(this.props.nameid).value; }  render(){    return(      <div>       <input id={this.props.nameid} type="text"></input>       </div>);  } }   

singletask :

export default class singletask extends component{    yourfunctionwhereyouneedtime(){     var timeselected = this.refs.timepickercomp.getselectedtime(); // here you'll access child component data.    }    render(){      ....      <timepicker ref="timepickercomp" nameid="time" />     .....   } }