如何传递event.target值？解决多输入框聚焦类型同步变更问题

我懂你的痛点——你现在用同一个type状态变量控制两个输入框的类型，结果不管聚焦哪一个，两个都会同步变成time类型。要实现只有当前被聚焦的输入框才切换类型，核心就是给每个输入框单独维护状态，而不是共享同一个变量。

修改后的类组件代码（匹配你原有的写法） #

class ShopHoursForm extends React.Component {
  constructor(props) {
    super(props);
    // 用对象存储每个输入框的独立类型状态
    this.state = {
      inputTypes: {
        open: 'text',
        close: 'text'
      }
    };
  }

  // 接收输入框标识，只更新对应输入框的类型
  onFocus = (inputKey) => {
    this.setState(prevState => ({
      inputTypes: {
        ...prevState.inputTypes, // 保留其他输入框的状态
        [inputKey]: 'time'       // 更新当前聚焦的输入框类型
      }
    }));
  }

  onBlur = (inputKey) => {
    this.setState(prevState => ({
      inputTypes: {
        ...prevState.inputTypes,
        [inputKey]: 'text'
      }
    }));
  }

  render() {
    return (
      <div>
        <Form.Control
          type={this.state.inputTypes.open}
          onFocus={() => this.onFocus('open')}
          onBlur={() => this.onBlur('open')}
          placeholder="Shop opens"
        />
        <Form.Control
          type={this.state.inputTypes.close}
          onFocus={() => this.onFocus('close')}
          onBlur={() => this.onBlur('close')}
          placeholder="Shop closes"
        />
      </div>
    );
  }
}

关键改动说明 #

• 把原来单一的type状态改成了inputTypes对象，每个输入框对应一个专属的状态键（open对应开店时间，close对应关店时间），这样两个输入框的状态就完全独立了。
• 更新了onFocus和onBlur方法，让它们接收一个inputKey参数，用来指定要修改哪个输入框的状态。
• 在输入框的事件回调里，分别传入对应的键名，这样聚焦第一个输入框时只会修改它的类型，第二个输入框不受影响，反之亦然。

补充：函数组件版本（如果你用React Hooks） #

如果你已经在用函数组件，也可以用useState实现相同的效果：

import { useState } from 'react';

function ShopHoursForm() {
  const [inputTypes, setInputTypes] = useState({
    open: 'text',
    close: 'text'
  });

  const handleFocus = (inputKey) => {
    setInputTypes(prev => ({
      ...prev,
      [inputKey]: 'time'
    }));
  };

  const handleBlur = (inputKey) => {
    setInputTypes(prev => ({
      ...prev,
      [inputKey]: 'text'
    }));
  };

  return (
    <div>
      <Form.Control
        type={inputTypes.open}
        onFocus={() => handleFocus('open')}
        onBlur={() => handleBlur('open')}
        placeholder="Shop opens"
      />
      <Form.Control
        type={inputTypes.close}
        onFocus={() => handleFocus('close')}
        onBlur={() => handleBlur('close')}
        placeholder="Shop closes"
      />
    </div>
  );
}

核心思路就是：每个需要独立交互的元素，都应该有自己对应的状态字段，避免用单一状态控制多个元素的属性，这样就能精准控制每个输入框的行为啦。

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