2
ich einfache Komponente habe Liste genannt, die ein einfacher ul ist mit einigen li innen. Jede li ist eine einfache Komponente. Ich habe andere Elternkomponente, die ein Eingabefeld und die Liste Komponente rendern. Tippen auf Senden Schlüssel Ich fange Text des Eingabefeldes. Ich möchte zum Beispiel eine Funktion namens handleNewText (inputText) aufrufen, aber diese Funktion muss in List-Komponente bleiben, da der Zustand, den ich benutze Komponenten in Liste Komponente bevölkern.Anruf Kind Komponentenmethode von den Eltern in reagiert
I don‘t wollen Liste und MyParent Komponente Refactoring die von Liste MyParent verwalten von Daten übergeben.
erste ist, Eltern und zweite 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'));
Können Sie Ihren Code zeigen? –