(reactjs）获取子组件值

(reactjs) get child component value

本文关键字：组件 获取 reactjs      更新时间：2023-09-26

我有以下反应组件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中的输入值？

您可以通过两种方式解决此问题：

  1. SingleTask组件中的唯一更改：向TimePicker组件添加一个ref并访问它的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" />
    .....
  }
}
  1. 通过子组件的功能公开数据（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" />
    .....
  }
}
相关文章：