React JS中子组件向父组件传递数据的实现方法咨询

在React中，子组件向父组件传递数据的核心方式是父组件传递回调函数作为props给子组件，子组件在选择变化时调用该回调并传入选中数据。以下是针对你的代码的具体修改方案：

步骤1：修改父组件Dashboard.js #

在Dashboard中定义状态存储选中的国家，同时创建回调函数，将其作为props传递给CountrySelector：

import React, { useState } from 'react';
import CountrySelector from '../util/CountrySelector';

const Dashboard = () => {
  // 存储选中的国家数据
  const [selectedCountry, setSelectedCountry] = useState(null);

  // 接收子组件传来的选中值
  const handleCountryChange = (country) => {
    setSelectedCountry(country);
    // 这里可以添加你需要的业务逻辑，比如接口请求、数据处理等
    console.log('当前选中的国家:', country);
  };

  return(
    <div>
      {/* 把回调函数作为props传给子组件 */}
      <CountrySelector onCountryChange={handleCountryChange} />
      {/* 可选：展示选中的国家信息 */}
      {selectedCountry && <p>已选中：{selectedCountry.label}</p>}
    </div>
  );
};

export default Dashboard;

步骤2：修改子组件CountrySelector.js #

接收父组件传入的onCountryChange回调，在选择事件触发时调用该回调，将选中值传递给父组件：

import React, { useState, useMemo } from 'react'
import Select from 'react-select'
import countryList from 'react-select-country-list'

// 接收父组件传递的props
function CountrySelector({ onCountryChange }) {
  const [value, setValue] = useState(null)
  const options = useMemo(() => countryList().getData(), [])

  const changeHandler = (selectedValue) => {
    setValue(selectedValue);
    // 调用父组件的回调函数，传递选中值
    if (onCountryChange) {
      onCountryChange(selectedValue);
    }
  }

  const style = {
    display: "inline-block",
    width: "300px"
  };
  return <div style={style}>
    <Select options={options} value={value} onChange={changeHandler} />
  </div>
}

export default CountrySelector;

可选方案：受控组件模式 #

如果不需要子组件单独维护状态，可以将状态完全托管到父组件，把CountrySelector改成受控组件：

修改后的CountrySelector.js #

import React, { useMemo } from 'react'
import Select from 'react-select'
import countryList from 'react-select-country-list'

function CountrySelector({ value, onChange }) {
  const options = useMemo(() => countryList().getData(), [])

  const style = {
    display: "inline-block",
    width: "300px"
  };
  return <div style={style}>
    <Select options={options} value={value} onChange={onChange} />
  </div>
}

export default CountrySelector;

对应的Dashboard.js调用方式 #

<CountrySelector value={selectedCountry} onChange={setSelectedCountry} />

内容的提问来源于stack exchange，提问作者Georgios Kompos