React onChange 事件不會在自定義輸入上觸發

Question

我有一個像這樣的自定義輸入組件：

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 更改 state 的所需行為：

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

當我添加這些行時，輸入變為只讀

Answer 1

如果您使用像 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;

Answer 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;

Answer 3

請試試這個。 您可以將 state 輸入到父組件中，並相應地從子組件更新。

輸入.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>
  )
}

Answer 4

在您的 Input 組件中，您沒有在任何地方使用傳遞的 onChange，這就是它沒有啟動的原因

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

另外，重要的一步，該值應該是 useEffect 的useEffect作為updater 。 如果你不這樣做，該值將不會更新，它將是readonly的

所以，傳遞 props 如下：

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

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

Answer 5

感謝您的建議，

React package 已過時，運行更新似乎解決了我的問題！