Reactjs 反应：手动触发输入组件合成更改事件

我正在尝试使用

react@17

从'react'导入{useRef}；
const InputWithClear=props=>{
const inputRef=useRef（）；
返回(
{
inputRef.current.value=''；
inputRef.current.dispatchEvent(
新事件（'change'，{bubbles:true}）
);
}}
>
清楚的
);
};

使用以下组件：

<InputWithClear value={value} onChange={(e) => {
  console.log(e); // I want to get a synthetic event object here
}} />

{
console.log（e）；//我想在这里得到一个合成事件对象
}} />

但只有当我先输入任何内容，然后再次停止工作时，“清除”按钮才会工作一次

如果我先输入一些内容，然后单击“清除”按钮，则它不起作用

为什么不使用

{
道具({
目标：{值：“”
})
}}
>
清楚的

因为合成事件对象将丢失

---

那么，如何手动触发react输入组件的合成更改事件呢？

您应该使用状态来控制输入值，而不是创建useRef，这就是方法。您可以使用

stopPropagation

prop来控制它：

const InputWithClear = ({value, setValue, stopPropagation = false}) => {

  const onClick = (e) => {
    if(stopPropagation)  e.stopPropagation()
    setValue('')
  }

  return (
    <div>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button
        onClick={onClick}
      >
        clear
      </button>
    </div>
  );
};

export default function App() {
  const [value, setValue] = useState('')
  return (
    <div className="App">
      <InputWithClear value={value} setValue={setValue} stopPropagation />
    </div>
  );
}

constinputwithclear=（{value，setValue，stopPropagation=false}）=>{
const onClick=（e）=>{
if（stopPropagation）e.stopPropagation（）
设置值（“”）
}
返回(
setValue（e.target.value）}
/>
清楚的
);
};
导出默认函数App（）{
const[value，setValue]=useState（“”）
返回(
);
}

试试这种方法

在父组件级别维护状态（此处父组件为

App

），

onClear

，在父组件级别上冒泡处理程序，并更新状态

import React, { useState } from "react";
import "./styles.css";

const InputWithClear = (props) => {
  return (
    <div>
      <input {...props} />
      <button onClick={props.onClear}>clear</button>
    </div>
  );
};

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputWithClear
        value={value}
        onChange={(e) => {
          console.log(e); // I want to get a synthetic event object here
          setValue(e.target.value);
        }}
        onClear={() => {
          setValue("");
        }}
      />
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
const InputWithClear=（道具）=>{
返回(
清楚的
);
};
导出默认函数App（）{
const[value，setValue]=useState（“”）；
返回(
你好，代码沙盒
{
console.log（e）；//我想在这里得到一个合成事件对象
设定值（即目标值）；
}}
onClear={（）=>{
设置值（“”）；
}}
/>
);
}

---

工作代码-

我已经更新了我的问题，在我的情况下，

一旦更改

从外部组件传递过来，我想使

可以像

一样使用，例如它可以决定是否调用

e.stopPropagation（）

，我编辑了我的答案以满足您的需要。您可以使用

stopPropagation

prop标志（默认为false）来控制它。