React将输入内容从子组件传递给父组件

2 年 ago

科, 雅

1 minute

过去我们是通过props直接传递〇〇，但已进行修正！(23/05/06)

我想做的事情

每当子组件的文本框发生变化时，将输入内容显示在父组件中。

前提 tí)

在同一个组件内可以改变和获取状态。

基本道具的复习

如果想看结论的话，请快速转到这里→实施

在React中，通过props来传递组件之间的数据。

当把值传递给子代时

母亲向子女发送

当调用子组件时，使用props名称={值}进行传递

// 親コンポーネント
import Child from './Child';
import React from 'react';

const Parent() {
  return (
    <div>
      <Child count={1000} />
    </div>
  );
}

export default Parent;

用中文原生描述：以子代替接收

请在参数中指定props。
可以通过{props.props名}从父组件传递的数据获取。
别忘了在参数中接收props！

// 子コンポーネント
const Child = (props)=>{   // 引数でpropsを受け取る
    return(
        <>
           <p>{props.count}</p>
        </>
    )
}
export default Child

将数据从子节点传递给父节点的过程

当你想要将数据从子项传递给父项时，怎么做呢？基本步骤如下：

→ 子组件可以将值传递给父组件

实施

因为我会变得很乱，所以我会一直不停地留下评论。

亲组件

import React, { useState } from "react";
import Child from "./Child";
//↑useStateを使う宣言 & 子コンポーネントの場所はここだよ宣言


const Parent = () => {
  const [text, setText] = useState("");
  // ↑親コンポーネントで使う：textの初期値とtextを更新する関数を宣言
  // ↓子コンポーネントから受け取った値で親コンポーネントのtextを更新する関数A
  const handleValueChange = (newValue) => {
    setText(newValue);
  };

  return (
    <div>
      <Child handleValueChange={handleValueChange} />
      {/* textを子コンポーネント側の値で更新するためにpropsで渡す */}
      <h1>{text}</h1>
      {/* ↑textはここに表示 */}
    </div>
  );
};

export default Parent;

子組件 (zǐ

使用了之前文章中的某些子组件。
展示React输入的值。

import React, { useState } from "react";
//propsで値を受け取る宣言。（忘れがちなので注意）
const Child = (props) => {
  // 親コンポーネントから受け取った関数を使って、inputの値を渡す
  const handleInputChange = (event) => {
    const value = event.target.value;
    props.handleValueChange(value);
  };

  return (
    <>
      <input
        type="text"
        // フォームが更新されるとhandleInputChangeが呼ばれる
        onChange={handleInputChange}
      />
    </>
  );
};

export default Child;

角色

整理亲侧与子侧的变量和函数。

亲近附近

text→変数。子コンポーネントから値を受け取ったらここに入れる。

setValueText→上記textを更新できる関数。

handleValueChange →setValueText関数を使って、引数の値でtextを更新する関数。

子侧

props.handleInputChange→親側から子へpropsでもらった関数。

handleInputChange→フォームに変更のあった場合呼ばれる。valueを見てpropsで受け取った関数を使い親に更新した値を渡す。