如何在反应中为每个 event.target.value 设置名称？答案

【问题标题】：how to set name to each event.target.value in react?如何在反应中为每个 event.target.value 设置名称？
【发布时间】：2022-12-14 00:48:54
【问题描述】：

我正在学习 react 并制作了一些带有输入的组件。我有几个使用event.target.value 的事件，但问题是它们会相互覆盖。

我如何为每个event.target.value设置一个特定的名称，比如event.target.myname.value

要了解更多详细信息，请参阅此处Code in stackblitz

下面是我需要更改的代码，并在此处使用某种标识符创建事件，这样它们就不会被其他值覆盖。

class Range extends React.Component {
  render() {
    return (
      <div>
        <label for="f-size">Font size(from 1 to 50): {event.target.value}px</label>
        <input
          type="range"
          id="f-size"
          defaultValue="14"
          name="fsize"
          min="1"
          max="50"
          onChange={(event)=>this.props.fzCallback(event.target.value)}
        />
        <p style={{ fontSize: `${event.target.value}px`}}>
          Test text for font size range input.
        </p>
      </div>
    );
  }
}
export default Range;

应用程序.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fz: '',
    };
  }
  handleFz = (fzData) => {
    this.setState((prev) => ({ ...prev, fz: fzData }));
  };
  render() {
    return (
      <div>
        <div>          
          <Range fzCallback={this.handleFz} />
        </div>
      </div>
    );
  }
}
export default App;

如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

您在 stackblitz 中的代码示例看起来有所不同并且不会重现问题，那里没有任何内容被覆盖
当我在第一个输入中输入数字时，它会影响范围组件中的字体大小。我没有在这里粘贴所有代码，因为它太多了

标签： reactjs react-hooks

【解决方案1】：

问题是您正在使用 Window event 属性，该属性返回站点处理的当前事件。（更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/event）

解决问题的方法是将道具传递给您的子组件。

因此，例如 Range 组件将如下所示：

class Range extends React.Component {
  render() {
    return (
      <div>
        <label for="f-size">Font size(from 1 to 50): {this.props.value}px</label>
        <input
          type="range"
          id="f-size"
          defaultValue="14"
          name="fsize"
          min="1"
          max="50"
          onChange={(event)=>this.props.fzCallback(event.target.value)}
        />
        <p style={{ fontSize: `${this.props.value}px`}}>
          Test text for font size range input.
        </p>
      </div>
    );
  }
}

还有你的App组件：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inp: '',
      bg: '',
      fc: '',
      fz: '',
    };
  }
  handleColor = (colorData) => {
    this.setState((prev) => ({ ...prev, fc: colorData }));
  };
  handleBg = (bgData) => {
    this.setState((prev) => ({ ...prev, bg: bgData }));
  };
  handleFz = (fzData) => {
    this.setState((prev) => ({ ...prev, fz: fzData }));
  };
  handleCallback = (childData) => {
    this.setState({ inp: childData });
  };
  handleReset = () => {
    this.setState({ inp: '' });
  };
  render() {
    const divStyle = {
      color: this.state.fc,
      backgroundColor: this.state.bg,
    };
    return (
      <div>
        <div style={divStyle}>
          <p>Start editing to see some magic happen :)</p>
          <Input
            parentCallback={this.handleCallback}
            parentReset={this.handleReset}
          />
          <Result title={this.state.inp} />
          <Select colorCallback={this.handleColor} bgCallback={this.handleBg} />
          <Range value={this.state.fz} fzCallback={this.handleFz} />
        </div>
      </div>
    );
  }
}

【讨论】：