javascript - (reactjs) 获取子组件值

Question

我有以下 react 组件时间选择器:

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" />
    .....
  }
} 

通过子组件的函数公开数据(React 方式):

时间选择器:

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>);
 }
}  

单任务:

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" />
    .....
  }
}