Ich habe einfache Komponente namensAufführe das ist ein einfaches ul mit etwas li Innerhalb. Jeder li ist eine einfache Komponente. Ich habe eine andere übergeordnete Komponente, die ein Eingabefeld und das @ renderAufführe Komponente. Tippen aufSende Taste Ich fange den Text des Eingabefeldes ein. Ich möchte zum Beispiel eine Funktion namens @ aufrufhandleNewText (inputText) aber diese Funktion muss in der Listenkomponente bleiben, da der Status, den ich verwende, um andere @ zu füll li Komponenten leben inAufführe component.

Ich möchte nicht umgestaltenList undMyParent -Komponente, die die Datenverwaltung von @ übergiList zuMyParent.

first ist Elternteil und an zweiter Stelle ist Kind

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 (
        <div>
          <input
            className="inputTodo"
            type="text"
            placeholder="want to be an hero...!"
            onKeyPress={this.handleKeyPress}
          />
          <List/>
        </div>
    );
  }

}


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 (
        <Todo key={index}
              clickHandler={this.flipDone}
              id={index}
              todo={todo}
              handleText={this.handleText}
        />
      );
    })

    return (
      <ul className="list">
        {myList}
      </ul>
    );
  }


ReactDOM.render(<TodoComp />,document.getElementById('myList'));