React で状態を親コンポーネントに戻す
優れた開発者を平均から際立たせる 1つの点は、クリーンで適切にフォーマットされたコードを記述できることです。
これは、コーダーが 1つのコンポーネント内で情報を保存して操作を実行し、別のコンポーネントがデータにアクセスして使用できるようにする React 機能の背後にある頭脳です。これが、React の子コンポーネントと親コンポーネントの関係です。
親コンポーネントまたは元のコンポーネントには、処理する操作がすでにあります。親コンポーネントにデータを置き換え、更新、または追加するために別のプロセスを実行したいコーダーは、これを行うために子コンポーネントを作成します。
開発者が複数のデータを親に渡したい場合もあります。複数の子コンポーネントを作成することも、これを行うための理想的な方法です。
これにより、親コンポーネントが短くなり、コードが少なくなります。
コールバック関数を使用してデータを親コンポーネントに返す
callback 関数は、関数の操作が処理されると関数を呼び出すことができる React の概念です。これは、子コンポーネントの関数を親に呼び出す簡単な方法です。
まず、ターミナルから新しいプロジェクトを作成します。npx create-react-app illustrationone と入力します。
プロジェクトが作成されたら、エディターのフォルダーに移動し、src フォルダーに移動して、新しいファイル Child.js を作成します。この例では、App.js と Child.js を使用します。
App.js が親コンポーネントとして機能し、次のように callback 関数を開始します。
コードスニペット（App.js）：
import React from 'react';
import Child from './Child'
class App extends React.Component{
state = {
name: "",
}
handleCallback = (childData) =>{
this.setState({name: childData})
}
render(){
const {name} = this.state;
return(
<div>
<Child parentCallback = {this.handleCallback}/>
{name}
</div>
)
}
}
export default App
最初に name 状態を作成し、次に Child.js コンポーネントから name 変数に対応するデータを取得するコールバック関数を宣言します。
子コンポーネントからデータを取得したら、Child.js の name 変数に割り当てられたデータを返す関数を作成します。
次に、Child.js に移動し、ここで、実行する操作を宣言します。
コードスニペット（Child.js）：
import React from 'react'
class Child extends React.Component{
onTrigger = (event) => {
this.props.parentCallback(event.target.myname.value);
event.preventDefault();
}
render(){
return(
<div>
<form onSubmit = {this.onTrigger}>
<input type = "text"
name = "myname" placeholder = "Enter Name"/>
<br></br><br></br>
<input type = "submit" value = "Submit"/>
<br></br><br></br>
</form>
</div>
)
}
}
export default Child
出力：
このデータを親に戻したいので、子コンポーネント内で callback 関数を開始する関数が必要です。ここで、onTrigger イベントリスナーが必要です。
Submit ボタンをクリックして結果が表示されると、onTrigger はすぐに callback 関数をアクティブにし、name 変数に割り当てられた値を親コンポーネントに戻します。
小道具を使用して状態を親コンポーネントに戻す
これは、前の例と比較してより簡単な方法です。props を使用して、処理された結果を親コンポーネントに返します。
src フォルダに移動し、新しいファイル User.js を作成します。これが子コンポーネントになります。
App.js は親コンポーネントであり、次のコードを渡します。
コードスニペット（App.js）：
import React from 'react'
import './App.css';
import User from './User'
function App() {
function getName(name) {
alert(name)
}
return (
<div className="App">
<h1>Returning State Back to Parent</h1>
<User getData={getName} />
</div>
);
}
export default App;
name 関数に割り当てられた日付を取得するように React フレームワークに指示する name 関数を作成します。次に、アラートを出します。つまり、ポップアップの形で戻ります。
次に、子コンポーネントである User.js にもう少しコードを追加します。
コードスニペット（User.js）：
function User(props)
{
const name="Oluwafisayo"
return(
<div>
<h1>My Name is : </h1>
<button onClick={()=>props.getData(name)} >Click Me</button>
</div>
)
}
export default User;
出力：
ここでは、データを name 関数に割り当て、Click me ボタンを押すと、onClick イベントリスナーがアクティブになり、データが小道具として親に返されます。props はプロパティの略であることに注意してください。
複数の子コンポーネントから親コンポーネントにデータを渡す
2つの子コンポーネントから親コンポーネントにデータを渡すため、親コンポーネント用に TodoList.js というファイルを作成し、子コンポーネント用に Todo.js と DeadlineList.js という 2つのファイルを作成します。
親コンポーネントには、子コンポーネントから取得するデータを取得するための関数を定義するコードが格納されます。
コードスニペット（TodoList.js）：
import React from "react";
import Todo from "./Todo";
import DeadlineList from "./DeadlineList";
const TodoList = ({ todos, toggleTodo }) =>
console.log(todos) || (
<table>
<tbody>
<tr>
<th className="taskTH">TASK</th>
<th className="deadlineTH">DEADLINE</th>
</tr>
<tr>
<td className="taskTD">
{todos.map((todo) => (
<Todo
key={todo.id}
text={todo.text}
completed={todo.completed}
toggleTodoItem={() => toggleTodo(todo.id)}
/>
))}
</td>
<td className="deadlineTd">
{" "}
{todos.map(
(todo) =>
console.log("TODO", todo) || (
<DeadlineList
key={todo.id}
value={todo.date}
completed={todo.completed}
onClick={() => toggleTodo(todo.id)}
/>
)
)}
</td>
</tr>
</tbody>
</table>
);
export default TodoList;
次に、フォームである Todo.js に取り組みます。データが入力され、[Todo の追加]ボタンをクリックすると、データが返されます。
コードスニペット（Todo.js）：
import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'
const Todo = (props) => {
const { toggleTodoItem, completed, text } = props;
let [ shouldPlaySound, setShouldPlaySound ] = useState(true);
function wooHooEverySecondClick() {
if (shouldPlaySound) {
wooHooSound.play();
setShouldPlaySound(false);
} else {
setShouldPlaySound(true);
}
}
return (
<li className="bananaLi"
onClick={() => {
toggleTodoItem();
wooHooEverySecondClick();
}}
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
>
{text}
</li>
);
};
export default Todo;
次に、DeadlineList.js は、リストをリスト形式の形式で親にレンダリングする役割を果たします。
コードスニペット（DeadlineList.js）：
import React from "react";
const DeadlineList = ({ onClick, completed, value }) => {
return (
<li
className="deadlineLi"
onClick={onClick}
style={{
textDecoration: completed ? "line-through" : "none"
}}
>
{new Intl.DateTimeFormat("en-US").format(value)}
</li>
);
};
export default DeadlineList;
次に、App.js 内のすべてをインポートします。
コードスニペット（App.js）：
import React from 'react';
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList';
import Footer from './Footer';
const App = () => (
<div className="appCSS">
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
export default App;
出力：
まとめ
開発者がチームとしてプロジェクトを構築する場合、コンポーネントごとに一貫性のあるショートコードを作成すると、チームメートからの支援を簡単に得ることができます。対照的に、コードが詰まっているプロジェクトは、支援したい仲間の開発者を簡単に延期します。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn