React中如何为每个event.target.value设置标识避免值覆盖？

问题分析 #

1. 你的Range组件中，<label>和<p>标签直接使用{event.target.value}是错误的——event仅存在于onChange回调函数的作用域内，组件渲染时访问event会引发未定义错误。
2. 多输入场景下，若仅传递value给父组件，父组件无法区分该值来自哪个输入，容易出现值覆盖。

解决方案 #

通过让子组件维护自身输入状态，并在回调中传递包含输入标识（name）和值（value）的对象，实现状态的精准管理。

修改后的Range组件

class Range extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态为传入的默认值或默认14px
    this.state = {
      value: props.defaultValue || '14'
    };
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ value });
    // 传递带标识的对象给父组件
    this.props.fzCallback({ name, value });
  };

  render() {
    const { value } = this.state;
    return (
      <div>
        {/* React中用htmlFor替代for，避免关键字冲突 */}
        <label htmlFor="f-size">Font size(from 1 to 50): {value}px</label>
        <input
          type="range"
          id="f-size"
          value={value}
          name="fsize"
          min="1"
          max="50"
          onChange={this.handleChange}
        />
        <p style={{ fontSize: `${value}px` }}>
          Test text for font size range input.
        </p>
      </div>
    );
  }
}
export default Range;

修改后的App组件

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fsize: '14', // 对应Range组件的name属性值
    };
  }

  handleFz = (inputData) => {
    const { name, value } = inputData;
    // 用计算属性名根据name更新对应状态，支持后续扩展多输入
    this.setState((prev) => ({ ...prev, [name]: value }));
  };

  render() {
    return (
      <div>
        <div>          
          <Range fzCallback={this.handleFz} defaultValue={this.state.fsize} />
        </div>
      </div>
    );
  }
}
export default App;

关键说明 #

• 受控组件模式：输入框绑定value到组件状态，确保界面展示与输入值完全同步。
• 标识传递：通过event.target.name获取输入的标识，父组件据此更新对应状态字段，彻底避免多输入时的值覆盖问题。
• 作用域修正：子组件内部维护输入状态，渲染时直接使用state.value，不再访问无效的event对象。

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