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

通过子组件的功能暴露数据（该阵营方式）：

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