（reactjs）獲取子組件值

Question

我有以下反應組件Timepicker：

export default class TimePicker extends Component{

 render(){
   return(
     <div>
      <input id={this.props.nameID} type="text"></input>
      </div>);
 }
}  

TimePicker由SingleTask使用：

export default class SingleTask extends Component{
   ....
   render(){
     ....
     <TimePicker nameID="time" />
    .....
  }
}

如何從SingleTask中訪問TimePicker中的輸入值？

Answer 1

您可以通過兩種方式解決此問題：

1. 僅在SingleTask組件中進行更改：向TimePicker組件添加一個引用並訪問它的DOM。 在這里，您可以通過選擇jQuery選擇器來查詢輸入。 在這里，我使用了標記選擇器（注意：不包括jQuery的依賴項）。

：

export default class SingleTask extends Component{ 
  yourFunction(){
    var selectedTime = React.findDOMNode(this.refs.timePickerComp).querySelector('input').value;
   }
  render(){
     ....
     <TimePicker ref="timePickerComp" nameID="time" />
    .....
  }
} 

2. 通過子組件的功能公開數據（React方式）：

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 the child component data.
   }
   render(){
     ....
     <TimePicker ref="timePickerComp" nameID="time" />
    .....
  }
}