Question

我有两个非常相似的下拉菜单，都有一个'onChange'事件：

    <Dropdown
      items={employeeNames}
      selection={employeeNames.name}
      onChange={this.handleEmployeeNamesChange}
    />
    <Dropdown
      items={employeeTypes}
      selection={employeeType.name}
      onChange={this.handleEmployeeTypeChange}
    />

有没有办法将两个handleChange函数组合为一个函数：

  handleEmployeeNameChange = newVal => {
    const newState = { ...this.state, employeeNames: newVal };
    this.setState({ ...newState, isValid: getValidation(newState) });
  };

  handleEmployeeTypeChange= newVal => {
    const newState = { ...this.state, employeeTypes: newVal };
    this.setState({ ...newState, isValid: getValidation(newState) });
  };

Answer 1

由您决定创建一种方法来组合您的更改和传递参数。

最终目标是更新您的key的右边state，使用此密钥作为参数。

<Dropdown
  items={employeeNames}
  selection={employeeNames.name}
  onChange={v => this.handleChangeDropdown("employeeNames",v)}
/>
<Dropdown
  items={employeeTypes}
  selection={employeeType.name}
  onChange={v => this.handleChangeDropdown("employeeTypes",v)}
/>

handleChangeDropdown = (key,newVal) => {
  this.setState({
     [key]:newVal,
     isValid: getValidation(newState)
  })
};

Answer 2

您可以创建一个工厂方法，该方法为所需的每个变更处理程序创建函数

handleGenericChange = changedProperty => newVal => {
    const newState = { ...this.state, [changedProperty]: newVal };
    this.setState({ ...newState, isValid: getValidation(newState) });
}

handleEmployeeNameChange = handleGenericChange('employeeNames')
handleEmployeeTypeChange = handleGenericChange('employeeTypes')

Answer 3

听起来像是代码复习问题。是的，有：

handleEmployeeChange = category => newVal => {
   const newState = { ...this.state, [category]: newVal };
   this.setState({ ...newState, isValid: getValidation(newState) });
};

为箭头函数设置第二个参数可以对其进行预配置以供以后使用：

<Dropdown
  items={employeeNames}
  selection={employeeNames.name}
  onChange={this.handleEmployeeChange('employeeNames')}
/>
<Dropdown
  items={employeeTypes}
  selection={employeeType.name}
  onChange={this.handleEmployeeChange('employeeTypes')}
/>

您甚至可以映射您的Dropdown组件，以避免任何重复：

['employeeNames', 'employeeTypes'].map(param => {
    <Dropdown
        items={data[param]}
        selection={data[param].name}
        onChange={this.handleEmployeeChange(param)}
        key={data[param].name} //If their name is unique
    />
})

您的值只需要在一个对象中即可：

data = {
    employeeNames: '',
    employeeTypes: ''
}

Answer 4

在更改时使用箭头功能并添加要更改的状态名称

<Dropdown
  items={employeeNames}
  selection={employeeNames.name}
  onChange={(v) => this.handleEmployeeChange('employeeNames', v)}
/>
<Dropdown
  items={employeeTypes}
  selection={employeeType.name}
  onChange={(v) => this.handleEmployeeChange('employeeTypes', v)}
/>

和

  handleEmployeeChange = (field, newVal) => {
    const newState = { ...this.state, field: newVal };
    this.setState({ ...newState, isValid: getValidation(newState) });
  };

Answer 5

您可以这样做：

ERROR o.a.kafka.common.metrics.Metrics - Error when registering metric on io.micronaut.configuration.kafka.metrics.KafkaConsumerMetrics$Reporter
java.lang.IllegalArgumentException: Prometheus requires that all meters with the same name have the same set of tag keys. There is already an existing meter named 'kafka_response_rate' containing tag keys [client_id]. The meter you are attempting to register has keys [client_id, node_id].
    at io.micrometer.prometheus.PrometheusMeterRegistry.lambda$collectorByName$9(PrometheusMeterRegistry.java:372)
    at java.base/java.util.concurrent.ConcurrentHashMap.compute(ConcurrentHashMap.java:1932)
    at io.micrometer.prometheus.PrometheusMeterRegistry.collectorByName(PrometheusMeterRegistry.java:359)
    at io.micrometer.prometheus.PrometheusMeterRegistry.newGauge(PrometheusMeterRegistry.java:230)
    at io.micrometer.core.instrument.MeterRegistry.lambda$gauge$1(MeterRegistry.java:258)
    at io.micrometer.core.instrument.MeterRegistry.lambda$registerMeterIfNecessary$5(MeterRegistry.java:528)
    at io.micrometer.core.instrument.MeterRegistry.getOrCreateMeter(MeterRegistry.java:580)
    at io.micrometer.core.instrument.MeterRegistry.registerMeterIfNecessary(MeterRegistry.java:543)
    at io.micrometer.core.instrument.MeterRegistry.registerMeterIfNecessary(MeterRegistry.java:528)
    at io.micrometer.core.instrument.MeterRegistry.gauge(MeterRegistry.java:258)
    at io.micrometer.core.instrument.Gauge$Builder.register(Gauge.java:190)
    at io.micrometer.core.instrument.MeterRegistry.gauge(MeterRegistry.java:440)
    at io.micronaut.configuration.kafka.metrics.KafkaConsumerMetrics$Reporter.registerMetric(KafkaConsumerMetrics.java:135)
    at io.micronaut.configuration.kafka.metrics.KafkaConsumerMetrics$Reporter.metricChange(KafkaConsumerMetrics.java:102)
    at org.apache.kafka.common.metrics.Metrics.registerMetric(Metrics.java:563)
    at org.apache.kafka.common.metrics.Sensor.add(Sensor.java:240)
    at org.apache.kafka.common.metrics.Sensor.add(Sensor.java:221)
    at org.apache.kafka.common.network.Selector$SelectorMetrics.maybeRegisterConnectionMetrics(Selector.java:1025)
    at org.apache.kafka.common.network.Selector.pollSelectionKeys(Selector.java:462)
    at org.apache.kafka.common.network.Selector.poll(Selector.java:425)
    at org.apache.kafka.clients.NetworkClient.poll(NetworkClient.java:510)
    at org.apache.kafka.clients.consumer.internals.ConsumerNetworkClient.poll(ConsumerNetworkClient.java:271)
    at org.apache.kafka.clients.consumer.internals.ConsumerNetworkClient.poll(ConsumerNetworkClient.java:242)
    at org.apache.kafka.clients.consumer.internals.ConsumerNetworkClient.poll(ConsumerNetworkClient.java:218)
    at org.apache.kafka.clients.consumer.internals.AbstractCoordinator.ensureCoordinatorReady(AbstractCoordinator.java:230)
    at org.apache.kafka.clients.consumer.internals.ConsumerCoordinator.poll(ConsumerCoordinator.java:314)
    at org.apache.kafka.clients.consumer.KafkaConsumer.updateAssignmentMetadataIfNeeded(KafkaConsumer.java:1218)
    at org.apache.kafka.clients.consumer.KafkaConsumer.poll(KafkaConsumer.java:1181)
    at org.apache.kafka.clients.consumer.KafkaConsumer.poll(KafkaConsumer.java:1115)
    at io.micronaut.configuration.kafka.processor.KafkaConsumerProcessor.lambda$process$7(KafkaConsumerProcessor.java:326)
    at io.micrometer.core.instrument.AbstractTimer.record(AbstractTimer.java:160)
    at io.micrometer.core.instrument.Timer.lambda$wrap$0(Timer.java:143)
    at java.base/java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:515)
    at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264)
    at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
    at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
    at java.base/java.lang.Thread.run(Thread.java:834)

在声明中

    <Dropdown
      items={employeeNames}
      selection={employeeNames.name}
      onChange={this.handleEmployeeChange.bind(this, "name")}
    />

   <Dropdown
      items={employeeTypes}
      selection={employeeType.name}
      onChange={this.handleEmployeeChange.bind(this, "type")}
   />

在onChange事件上合并两个不同但非常相似的函数

5 个答案: