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