Input组件的onChange事件不能对外暴露事件对象吗？

[shervinchen]

React默认的onChange事件是可以拿到e: React.ChangeEvent的事件对象的，但是现在好像Input组件内只存了value，导致onChange的时候只能获取到value，而拿不到事件对象？

[zqran]

你要拿到什么？使用场景能否描述下？

[shervinchen]

你要拿到什么？使用场景能否描述下？

我就想拿到事件对象，但是现在onChange的参数只能拿到value。。

[shervinchen]

一般来说，onChange都是应该对外暴露出事件对象的吧，然后在外部可以通过e.target.value获取到最新的值，也可以通过e获取到其他事件对象上的属性

[zqran]

额~ Input 组件最常用的就是在 change 时拿到 value 来实现受控。所以，ant-mobile 的 Input 组件默认是这样的设计。
你需要描述你的需求，以及使用场景，我们才能帮到你~ 而不仅仅是我就想要，要了干嘛呢？用在哪？解决什么实际的业务问题？

[shervinchen]

额~ Input 组件最常用的就是在 change 时拿到 value 来实现受控。所以，ant-mobile 的 Input 组件默认是这样的设计。 你需要描述你的需求，以及使用场景，我们才能帮到你~ 而不仅仅是我就想要，要了干嘛呢？用在哪？解决什么实际的业务问题？

用途很多啊。。比如阻止事件冒泡不就要用到事件对象吗。。拿不到事件对象，很多方法都不能用了

[awmleer]

上面 @zqran 也提到了，其实更多的是最常见的使用场景～ onChange 的第一个参数是 string 而不是原生 event，在大多数情况下使用起来都会更简单的一些，毕竟一般情况下，大家是为了取到 input 变化的那个“值”，特别是和 Form 配合使用的时候，会省心很多

除此之外的话，这样设计还是为了和其他组件尽量保持一致，避免学习成本和认知成本，因为几乎所有的“表单”类型的组件，props.value: V props.onChange(value: V) props.defaultValue: V，这三个类型 V 都是一致的（例如对应到 Input 组件的话，V 就是 string）

至于 @shervinchen 你所说的希望在某些情况下能接触到原生的事件，其实倒是可以让 Input 的 onChange 增加第二个参数：onChange: (value: string, event: Event)

[shervinchen]

上面 @zqran 也提到了，其实更多的是最常见的使用场景～ onChange 的第一个参数是 string 而不是原生 event，在大多数情况下使用起来都会更简单的一些，毕竟一般情况下，大家是为了取到 input 变化的那个“值”，特别是和 Form 配合使用的时候，会省心很多

除此之外的话，这样设计还是为了和其他组件尽量保持一致，避免学习成本和认知成本，因为几乎所有的“表单”类型的组件，props.value: V props.onChange(value: V) props.defaultValue: V，这三个类型 V 都是一致的（例如对应到 Input 组件的话，V 就是 string）

至于 @shervinchen 你所说的希望在某些情况下能接触到原生的事件，其实倒是可以让 Input 的 onChange 增加第二个参数：onChange: (value: string, event: Event)

大概懂了。。这么说的话确实直接拿到value方便点，而且有一些情况好像根本就拿不到event对象
比如我是通过点击清除图标来改变了input的值，这个时候触发onChange事件，也就只能知道最新的value是空，但是拿不到事件对象。。因为是点击触发的，不是输入改变触发。。

[shervinchen]

上面 @zqran 也提到了，其实更多的是最常见的使用场景～ onChange 的第一个参数是 string 而不是原生 event，在大多数情况下使用起来都会更简单的一些，毕竟一般情况下，大家是为了取到 input 变化的那个“值”，特别是和 Form 配合使用的时候，会省心很多

除此之外的话，这样设计还是为了和其他组件尽量保持一致，避免学习成本和认知成本，因为几乎所有的“表单”类型的组件，props.value: V props.onChange(value: V) props.defaultValue: V，这三个类型 V 都是一致的（例如对应到 Input 组件的话，V 就是 string）

至于 @shervinchen 你所说的希望在某些情况下能接触到原生的事件，其实倒是可以让 Input 的 onChange 增加第二个参数：onChange: (value: string, event: Event)

在onChange上增加了第二个参数，Input内部应该怎样改造呢

[shervinchen]

上面 @zqran 也提到了，其实更多的是最常见的使用场景～ onChange 的第一个参数是 string 而不是原生 event，在大多数情况下使用起来都会更简单的一些，毕竟一般情况下，大家是为了取到 input 变化的那个“值”，特别是和 Form 配合使用的时候，会省心很多

除此之外的话，这样设计还是为了和其他组件尽量保持一致，避免学习成本和认知成本，因为几乎所有的“表单”类型的组件，props.value: V props.onChange(value: V) props.defaultValue: V，这三个类型 V 都是一致的（例如对应到 Input 组件的话，V 就是 string）

至于 @shervinchen 你所说的希望在某些情况下能接触到原生的事件，其实倒是可以让 Input 的 onChange 增加第二个参数：onChange: (value: string, event: Event)

你的意思是可以这样吧，在setState的时候把event对象传入第二个参数，然后在外面onChange的时候就可以拿到了

import React, { useState } from "react";
import { useControllableValue } from "ahooks";

const ControllableComponent = (props: any) => {
  const [state, setState] = useControllableValue<string>(props, {
    trigger: "onChange"
  });

  return (
    <input
      value={state}
      onChange={(e) => {
        setState(e.target.value, e);
      }}
      style={{ width: 300 }}
    />
  );
};

const App = () => {
  const [state, setState] = useState<string>("");
  const clear = () => {
    setState("");
  };

  return (
    <>
      <ControllableComponent
        value={state}
        onChange={(value: string, e: React.ChangeEvent) => {
          setState(value);
        }}
      />
      <button type="button" onClick={clear} style={{ marginLeft: 8 }}>
        Clear
      </button>
    </>
  );
};

export default App;

[awmleer]

是的，大概是这个意思