如何从AvailabiltyCalender组件访问子组件DatePicker的focusedInput状态值？

嘿，这个问题在React组件通信里挺常见的，我给你整理几种实用的实现方式，你可以根据自己的场景来选：

React的核心思想之一就是单向数据流，所以最推荐的方式是把子组件的状态提升到父组件来管理。简单说就是把focusedInput从DatePicker移到AvailabiltyCalender里，然后通过props把状态和更新方法传给子组件，子组件只负责触发更新，父组件就能实时拿到最新值了。

示例代码：

// AvailabiltyCalender 父组件
import { useState } from 'react';
import DatePicker from './DatePicker';

function AvailabiltyCalender() {
  // 把 focusedInput 状态放在父组件
  const [focusedInput, setFocusedInput] = useState(null);

  // 定义更新状态的方法，传给子组件
  const updateFocusedInput = (newValue) => {
    setFocusedInput(newValue);
    // 这里就能直接拿到最新的 focusedInput 值，做你需要的操作
    console.log('当前聚焦的输入框：', newValue);
  };

  return (
    <div className="availability-calendar">
      <DatePicker 
        focusedInput={focusedInput}
        onFocusChange={updateFocusedInput}
      />
    </div>
  );
}

// DatePicker 子组件
import { useState, useEffect } from 'react';

function DatePicker({ focusedInput, onFocusChange }) {
  // 子组件可以保留本地状态（如果需要内部逻辑），也可以直接用父组件传过来的
  const [localFocused, setLocalFocused] = useState(focusedInput);

  // 同步父组件的状态到本地（如果父组件需要主动修改子组件状态）
  useEffect(() => {
    setLocalFocused(focusedInput);
  }, [focusedInput]);

  // 输入框聚焦时，通知父组件更新状态
  const handleInputFocus = (inputType) => {
    setLocalFocused(inputType);
    onFocusChange(inputType);
  };

  return (
    <div className="date-picker">
      <input
        type="text"
        placeholder="开始日期"
        onFocus={() => handleInputFocus('start')}
      />
      <input
        type="text"
        placeholder="结束日期"
        onFocus={() => handleInputFocus('end')}
      />
    </div>
  );
}

export default DatePicker;

如果不想改动子组件的状态管理逻辑（比如子组件必须自己维护focusedInput），那可以在父组件定义一个回调函数，传给子组件。当子组件的focusedInput状态变化时，调用这个回调把最新值传给父组件。

示例代码：

// AvailabiltyCalender 父组件
import { useState } from 'react';
import DatePicker from './DatePicker';

function AvailabiltyCalender() {
  const [childFocusState, setChildFocusState] = useState(null);

  // 接收子组件传来的状态
  const handleFocusUpdate = (focusValue) => {
    setChildFocusState(focusValue);
    console.log('子组件更新的聚焦状态：', focusValue);
  };

  return (
    <div>
      <DatePicker onFocusedInputChange={handleFocusUpdate} />
    </div>
  );
}

// DatePicker 子组件
import { useState, useEffect } from 'react';

function DatePicker({ onFocusedInputChange }) {
  const [focusedInput, setFocusedInput] = useState(null);

  // 当本地状态变化时，调用父组件的回调
  useEffect(() => {
    onFocusedInputChange(focusedInput);
  }, [focusedInput, onFocusedInputChange]);

  const handleFocus = (inputName) => {
    setFocusedInput(inputName);
  };

  return (
    <div>
      <input onFocus={() => handleFocus('start')} placeholder="开始日期" />
      <input onFocus={() => handleFocus('end')} placeholder="结束日期" />
    </div>
  );
}

export default DatePicker;

这种方式是通过Ref直接获取子组件的内部状态，但我得提醒你：这违背了React的单向数据流原则，会让组件间的依赖关系变得不清晰，后期维护容易出问题。除非你真的有特殊需求（比如无法用前两种方法），否则不建议用。

示例代码：

// AvailabiltyCalender 父组件
import { useRef } from 'react';
import DatePicker from './DatePicker';

function AvailabiltyCalender() {
  const datePickerRef = useRef(null);

  // 比如点击按钮时获取子组件状态
  const getFocusState = () => {
    if (datePickerRef.current) {
      const currentFocus = datePickerRef.current.focusedInput;
      console.log('通过Ref拿到的聚焦状态：', currentFocus);
    }
  };

  return (
    <div>
      <DatePicker ref={datePickerRef} />
      <button onClick={getFocusState}>获取当前聚焦状态</button>
    </div>
  );
}

// DatePicker 子组件
import { useState, forwardRef, useImperativeHandle } from 'react';

// 用 forwardRef 把Ref转发到子组件内部
const DatePicker = forwardRef((props, ref) => {
  const [focusedInput, setFocusedInput] = useState(null);

  // 暴露指定的状态/方法给父组件
  useImperativeHandle(ref, () => ({
    focusedInput
  }));

  const handleFocus = (inputName) => {
    setFocusedInput(inputName);
  };

  return (
    <div>
      <input onFocus={() => handleFocus('start')} placeholder="开始日期" />
      <input onFocus={() => handleFocus('end')} placeholder="结束日期" />
    </div>
  );
});

export default DatePicker;

总的来说，优先选状态提升，其次是回调函数，Ref尽量不用。这样代码会更符合React的设计模式，也更容易维护~

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