2
У меня есть простой компонент, называемый Списком которая является простым улем с некоторыми литием внутри. Каждый li - простой компонент. У меня есть другой родительский компонент, который отображает одно поле ввода и Список. Нажатие на Отправить ключ Я поймаю текст поля ввода. Я хочу вызвать, например, функцию с именем handleNewText (inputText), но эта функция должна оставаться внутри компонента List, потому что состояние, которое я использую для заполнения других li компонентов в реальном времени Список Компонент.Вызова дочернего метод компонента из родительских в реакцию
Я не хочу рефакторировать компонент List и MyParent, передающий управление данными из списка в MyParent.
первым является родитель и второй ребенком
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'));
Можете ли вы показать свой код? –