Chiamare il metodo del componente figlio dal genitore in risposta

Ho un semplice componente chiamato List che è un semplice ul con alcuni li dentro. Ogni li è un componente semplice. Ho un altro componente padre che rende un campo di input e il componente List . Toccando il tasto Invia rilevo il testo del campo di inserimento. Voglio chiamare ad esempio una funzione chiamata handleNewText (inputText) ma questa funzione deve rimanere all’interno del componente List perché lo stato che utilizzo per popolare altri componenti li vive nel componente List .

Non voglio refactoring List e il componente MyParent che passa la gestione dei dati da List a MyParent .

il primo è genitore e il secondo è figlio

 class TodoComp extends React.Component { constructor(props){ super(props); this.handleKeyPress = this.handleKeyPress.bind(this); } componentDidMpunt(){ console.log(this._child.someMethod()); } handleKeyPress(event){ if(event.key === 'Enter'){ var t = event.target.value; } } render(){ return ( 
); } } export default class List extends React.Component { constructor() { super(); this.flipDone = this.flipDone.bind(this); this.state = { todos: Array(3).fill({ content: '', done: false}) }; } flipDone(id) { let index = Number(id); this.setState({ todos: [ ...this.state.todos.slice(0, index), Object.assign({}, this.state.todos[index], {done: !this.state.todos[index].done}), ...this.state.todos.slice(index + 1) ] }); } render() { const myList = this.state.todos.map((todo, index) => { return ( ); }) return (
    {myList}
); } ReactDOM.render(,document.getElementById('myList'));

È necessario fare uso di riferimenti per chiamare una funzione nel componente figlio dal componente principale

rendere il componente List da padre come

  

e quindi accedere alla funzione this.refs.myList.handleNewText() come this.refs.myList.handleNewText()

AGGIORNARE:

I ref di stringhe non sono più raccomandati da React, dovresti usare i callback di ref, controllare questo

  this.myList=ref}/> 

e quindi accedere alla funzione figlio come

 this.myList.handleNewText() 

Aggiungendo alla soluzione @ shubham-khatri:

Se si fa riferimento a un componente figlio connesso

un. Quel bambino deve dire withRef: true nel parametro (4a) config:

 @connect(store => ({ foo: store.whatever … }),null,null,{ withRef: true }) 

b. L’accesso avviene tramite getWrappedInstance() (nota che anche getWrappedInstance deve essere chiamato () )

 getWrappedInstance().howdyPartner()