(reactjs) erhalten Wert Kindkomponente

Question

i die haben folgende reagieren Komponente Timepicker:

export default class TimePicker extends Component{ 

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

Timepicker von SingleTask verwendet wird:

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

Wie kann ich den Eingangswert in Timepicker von SingleTask zugreifen?

Answer 1

Sie können dies auf 2 Arten lösen:

1. nur in SingleTask Komponente ändern: eine ref Timepicker Komponente und Zugang hinzufügen es ist DOM. Von dort können Sie Ihre Eingabe durch die Wahl von jQuery Selector abfragen. Hier habe ich Tag-Selektor verwendet (Hinweis: Es gibt keine Abhängigkeit der jQuery enthalten sein).

:

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

2. Expose Daten durch Funktion der Kinder Komponente (Die Art und Weise reagieren):

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