2
を反応させます。それぞれlは簡単なコンポーネントです。 私は1つの入力フィールドをレンダリングする他の親コンポーネントと、リストコンポーネントを持っています。 をタップキーを入力する入力フィールドのテキストをキャッチします。例えば、というhandleNewText（inputText）という関数を呼びたいと思っていますが、この関数は、他のサブフィールドに入れておく必要があります。liコンポーネントには、liのコンポーネントがあります。コール子コンポーネントの方法は、私はいくつかの<strong>李内部</strong>とシンプル<strong>UL</strong>ある<strong>一覧</strong>と呼ばれる単純なコンポーネントを持っている
ListおよびMyParentコンポーネントがListから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'));
あなたのコードを表示できますか？ –