React onChange 事件不会在自定义输入上触发答案

【问题标题】：React onChange event will not fire on custom InputReact onChange 事件不会在自定义输入上触发
【发布时间】：2021-06-10 13:20:57
【问题描述】：

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

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"
/>

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

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

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

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

【问题讨论】：

在您的Input 组件中，您没有在任何地方使用传递的onChange，这就是它没有启动的原因。也包括<input onChange={props.onChange} ... 。

标签： javascript reactjs

【解决方案1】：

如果你使用像 Input 这样的自定义组件，你必须指定所有的 props，你可以看到你给 Input 组件一个 onChange prop，而不将它传递给 input 标签。

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;

【讨论】：

更改它并通过道具添加事件似乎将输入更改为只读，并且事件仍然不会触发

【解决方案2】：

您需要从您的Input 组件处理您的onChange()。否则，它不会直接触发。

import * as React from "react";
const Input = (props) => {
  return (
    <input
       type={props.type}
       name={props.name}
       className={props.className}
       value={value}
       onChange={ev => props.onChange}
    />
 );
};
export default Input;

【讨论】：

【解决方案3】：

请试试这个。您可以在父组件中提供输入状态并相应地从子组件更新。

Input.js

import * as React from "react";

const Input = (props) => {
  
  return (
    <input
      type={props.type}
      name={props.name}
      className={props.className}
      value={props.value}
      onChange={e => props.handleInputData(e.target.value)}

    />
  );
};
export default Input;

第二个组件

import React from 'react'

export default function secondComponent() {
  const [inputData,handleInputData] = useState("");
  return (
    <div>
      <Input
        type="text"
        id="subject"
        className="rounded-sm px-4 py-3 mt-3 focus:outline-none w-full border bg-transparent border- 
          gray-300"
        placeholder="Subject"
        handleInputData={handleInputData}
        value={inputData}
      />
    </div>
  )
}

【讨论】：

尝试这个仍然没有运气，尝试通过道具传递事件并且字段仍然是只读的？感谢您的帮助！

【解决方案4】：

在您的 Input 组件中，您没有在任何地方使用传递的 onChange，这就是它没有启动的原因

<Input
  .
  .
  .
  onChange={props.onChange}
/>

另外，重要的一步，值应该是useEffect 的状态，如updater。如果你不这样做，值将不会更新，它将是readonly

所以，传递 props 如下：

const [subject, setSubject] = useState('');

<Input
  .
  .
  value={subject}
  onChange={e => setSubject(e.target.value)}
/>

【讨论】：

【解决方案5】：

感谢您的建议，

React 包已过时，运行更新似乎解决了我的问题！

【讨论】：