javascript - 为不同的输入创建通用的 onChange() 函数，而不使用名称标签

Question

我正在尝试为所有输入字段创建一个通用的handleChange()函数。我有超过 30 个输入字段，因此实际上没有一种选择可以为每个输入提供一个 handleChange 方法，因为这会创建大量样板代码。在下面的示例中，我尝试创建一个可以处理任何输入的函数。

对于我的项目，我使用 Ant 设计，它似乎不支持表单元素内的 name 属性(例如 InputNumber/Input 等)

InputNumber 字段示例:

<InputNumber name='myNumber' min={1} max={100000} placeholder='Enter number'  value={this.state.myNumber} onChange={handleChange}/>

这是我尝试编写通用的 onChange 方法。但它传递了这个错误:无法读取未定义的属性“名称”

 handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });

此方法允许我访问任何选定的输入元素并更新该特定元素。但是，由于缺少名称属性，这确实有效。

如下所示，这种方法有效，但仍然没有通用的解决方案 - 一种处理任何输入并映射到正确状态值的方法。

state = {
    myNumber: 0,
    myNumber2: 0,
    myNumber3: 0
  };

  handleChange = e => {
    this.setState({
      myNumber: e
    });
  };

在下面的示例中，handleChange 函数将仅更新 myNumber，而不是 myNumber2 和 myNumber3。

<InputNumber name='myNumber' min={1} max={100000} placeholder='Enter number'  value={this.state.myNumber} onChange={handleChange}/>
<InputNumber name='myNumber2' min={1} max={100000} placeholder='Enter number'  value={this.state.myNumber2} onChange={handleChange}/>
<InputNumber name='myNumber3' min={1} max={100000} placeholder='Enter number'  value={this.state.myNumber3} onChange={handleChange}/>

对解决方法有什么建议吗？

Answer 1

根据InputNumber API ，onChange 接受 Number|String，e.target.value 将始终解决运行时错误。

onChange: The callback triggered when the value is changed - function(value: number | string)

这是一个例子，我想用书面形式:

<InputNumber name='myNumber' min={1} max={100000} placeholder='Enter number'  value={this.state.myNumber} onChange={handleChange}/>

您的意思是使用类组件，因为您所描述的 onChange={handleChange} 必须是类的一部分。

export default class App extends React.Component {
  state = {
    myNumber: 0
  };

  handleChange = e => {
    this.setState({
      myNumber: e
    });
  };

  render() {
    return (
      <FlexBox>
        <InputNumber
          name="myNumber"
          min={1}
          max={100000}
          placeholder="Enter number"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
      </FlexBox>
    );
  }
}

<小时/>

• 如果您想使用通用方法handleChange，您应该将组件类型从InputNumber更改为Input，因为您想要访问name="myNumber" 属性。

handleChange = e => {
  e.persist();
  this.setState({
    [e.target.name]: e.target.value
  });
};

• 更好的方法是继续使用 InputNumber 并将 handleChange 实现为柯里化(Currying)函数:

handleChange = name => e => {
  this.setState({
    [name]: e
  });
};

检查example两种方法的比较:

class AppInputNumber extends React.Component {
  state = {
    myNumber: 0,
    myNumber2: 0,
    myNumber3: 0
  };

  handleChange = name => e => {
    this.setState({
      [name]: e
    });
  };

  render() {
    return (
      <FlexBox>
        <InputNumber
          min={1}
          max={100000}
          placeholder="Enter number"
          value={this.state.myNumber}
          onChange={this.handleChange('myNumber')}
        />
        <InputNumber
          min={1}
          max={100000}
          placeholder="Enter number"
          value={this.state.myNumber2}
          onChange={this.handleChange('myNumber2')}
        />
        <InputNumber
          min={1}
          max={100000}
          placeholder="Enter number"
          value={this.state.myNumber3}
          onChange={this.handleChange('myNumber3')}
        />
      </FlexBox>
    );
  }
}

export default class App extends React.Component {
  state = {
    myNumber: 0,
    myNumber2: 0,
    myNumber3: 0
  };

  handleChange = e => {
    e.persist();
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <FlexBox>
        <Input
          name="myNumber"
          min={1}
          max={100000}
          type="number"
          placeholder="Enter number"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
        <Input
          name="myNumber2"
          min={1}
          max={100000}
          type="number"
          placeholder="Enter number"
          value={this.state.myNumber2}
          onChange={this.handleChange}
        />
        <Input
          name="myNumber3"
          min={1}
          max={100000}
          type="number"
          placeholder="Enter number"
          value={this.state.myNumber3}
          onChange={this.handleChange}
        />
        <AppInputNumber />
      </FlexBox>
    );
  }
}

<小时/>