时间戳

首页 > 解决方案 > React onChange 事件不会在自定义输入上触发

javascript - React onChange 事件不会在自定义输入上触发

问题描述

我有一个像这样的自定义输入组件：

import * as React from "react";

const Input = (props) => {
  
  return (
    <input
      type={props.type}
      name={props.name}
      className={props.className}
      value={props.value}
      onChange={props.onChange}
    />
  );
};
export default Input;

我正在尝试处理 onChange 事件，但它不会在这里触发：

import Input from "../../Components/Input";
...
<Input
  type="text"
  onChange={e => console.log(`${e.target.value}`)}
  id="subject"
  className="rounded-sm px-4 py-3 mt-3 focus:outline-none w-full border bg-transparent border- 
    gray-300"
  placeholder="Subject"
/>

我尝试通过道具将事件传递给自定义输入，并尝试直接在 Input 组件中处理事件。

使用 useState 更改状态的期望行为：

const [subject, setSubject] = useState('');
...
onChange={e => setSubject(e.target.value)}

当我添加这些行时，输入变为只读

标签： javascriptreactjs

解决方案

如果您使用像 Input 这样的自定义组件，则必须指定所有道具，正如您所见，您正在为 Input 组件提供 onChange 道具，而不将其传递给输入标签。

import * as React from "react";

const Input = (props) => {
  
  return (
    <input
      type={props.type}
      name={props.name}
      className={props.className}
      value={value}
      onChange={props.onChange}
    />
  );
};
export default Input;

推荐阅读