Reactjs onClick不在react中的form元素中工作，但在button中工作？

试图让onClick函数在react with a form中工作，但是，它不工作，但使用按钮可以

以下代码适用于按钮，但不适用于输入。我想知道我可能是什么

          <CustomInput
              onChange={(v) => setLastName(v)}
              label="Last Name*"
              invalid={
                (lastName || validate) &&
                !yup.string().required().isValidSync(lastName)
              }
              value={lastName}
              onClick={() => alert('hello')}
            />
            <button onClick={() => alert('hello')}>Click me!</button>

setLastName（v）}
label=“姓氏*”
无效的={
（姓氏| |验证）&&
！yup.string（）.required（）.isValidSync（lastName）
}
值={lastName}
onClick={（）=>alert（'hello'）}
/>
警报（'hello'）}>点击我！

这可能是因为您在CustomComponent中的任何位置都没有使用onClick道具。当您将onClick道具传递给按钮时，React知道它必须创建一个按钮，并将onClick事件侦听器附加到该按钮，当单击该按钮时，该侦听器将触发您的警报。但是，当您将onClick属性传递给CustomComponent时，由于React天生不知道CustomComponent是什么，因此它不会立即创建组件。它首先访问CustomComponent的源文件，并根据CustomComponent的render方法的返回创建DOM元素。 可以访问传递给CustomComponent的任何道具。以这种方式传递道具时，React假定onClick只是道具的另一个名称，并且不理解您希望它在CustomComponent的render方法的return语句中将eventListener附加到包装器元素。您必须手动附加此内部CustomComponent

比如说,

CustomButton.js

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div onClick={props.onClick}>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button onClick={props.anyprop}>Click me</button>
        </div>
    );
};

export default CustomButton;

从“React”导入React；
const CustomButton=props=>{
返回(
点击我
);
};
导出默认自定义按钮；

App.js

import './App.css';
import CustomButton from './CustomButton';

function App() {
  return (
    <div className="App">
      <CustomButton onClick={()=>alert("Clicked")}/>
    </div>
  );
}

export default App;

import './App.css';
import CustomButton from './CustomButton';

function App() {
  return (
    <div className="App">
      <CustomButton anyprop={()=>alert("Clicked")}/>
    </div>
  );
}

export default App;

import'/App.css'；
从“/CustomButton”导入CustomButton；
函数App（）{
返回(
警报（“单击”）}/>
);
}
导出默认应用程序；

在上述情况下，单击按钮时不会发生任何事情，因为CustomButton.js中没有onClick

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div onClick={props.onClick}>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button onClick={props.anyprop}>Click me</button>
        </div>
    );
};

export default CustomButton;

但是，如果这样做：

CustomButton.js

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div onClick={props.onClick}>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button onClick={props.anyprop}>Click me</button>
        </div>
    );
};

export default CustomButton;

从“React”导入React；
const CustomButton=props=>{
返回(
点击我
);
};
导出默认自定义按钮；

现在，单击按钮时（或者更确切地说，单击div时）将显示警报

传递给CustomButton的道具名称也不需要再次单击，因为在自定义组件上使用时，该词没有任何意义

App.js

import './App.css';
import CustomButton from './CustomButton';

function App() {
  return (
    <div className="App">
      <CustomButton onClick={()=>alert("Clicked")}/>
    </div>
  );
}

export default App;

import './App.css';
import CustomButton from './CustomButton';

function App() {
  return (
    <div className="App">
      <CustomButton anyprop={()=>alert("Clicked")}/>
    </div>
  );
}

export default App;

import'/App.css'；
从“/CustomButton”导入CustomButton；
函数App（）{
返回(
警报（“单击”）}/>
);
}
导出默认应用程序；

CustomButton.js

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div onClick={props.onClick}>
            <button>Click me</button>
        </div>
    );
};

export default CustomButton;

import React from 'react';

const CustomButton = props => {
    return (
        <div>
            <button onClick={props.anyprop}>Click me</button>
        </div>
    );
};

export default CustomButton;

从“React”导入React；
const CustomButton=props=>{
返回(
点击我
);
};
导出默认自定义按钮；

---

只要在CustomButton和App中传递的道具名称匹配，这也可以正常工作。

将

CustomInput

component的源代码放入CustomInput组件中。如果在CustomInput组件中没有onClick方法，它将不会做任何事情。