React中功能组件内部的功能答案

【问题标题】：Function inside functional component in ReactReact中功能组件内部的功能
【发布时间】：2021-08-06 19:11:09
【问题描述】：

我正在尝试在 React 的功能组件中执行一个函数。我的代码如下所示

import logo from './logo.svg';
import './App.css';


function App() {

  function checkvalue(checkboxElem) {
    if (checkboxElem.checked) {
      alert("hi");
    } else {
      alert("bye");
    }
  }

  return (
    <div className="App">
        <div><input type="checkbox" onchange="checkvalue(this)"/>Bracelets</div>
    </div>
  );
}

export default App;

但该功能不起作用。

【问题讨论】：

标签： reactjs react-functional-component

【解决方案1】：

使用 React 元素处理事件与处理 DOM 元素的事件非常相似。有一些语法差异：

例如，HTML：

<input type="checkbox" onchange="checkvalue(this)"/>

在 React 中略有不同：

<input type="checkbox" onChange={checkvalue}/>

【讨论】：

感谢@Abhijeet Abnave。我收到错误 Error: Expected onChange` 侦听器是一个函数，而是得到了 string 类型的值。`
onChange={checkvalue(this)} 将在等待change 发生之前执行该函数。 onChange={(e) => checkvalue(e.target)}会更准确
@abuabu 您需要使用 onChange={(e) => checkvalue(e.target)} 您可能已经在 onChange 中传递字符串，例如 onChange={"checkvalue()"} 这是错误的
感谢@SinanYaman。您的解决方案有效。

【解决方案2】：

如果你来自 Angular 世界，JSX 语法会有点不同。

您需要使用花括号来为元素属性分配任何值/函数：

import logo from './logo.svg';
import './App.css';

function App() {
  function checkvalue(checkboxElem) {
    if (checkboxElem.checked) {
      alert('hi');
    } else {
      alert('bye');
    }
  }

  return (
    <div className="App">
      <div>
        <input type="checkbox" onChange={checkvalue} /> {/* <----- HERE */}
        Bracelets
      </div>
    </div>
  );
}

export default App;

【讨论】：

【解决方案3】：

您的代码中有几个问题。

您错误地传递了 onChange 道具。现在，您将它作为字符串传递并将其传递给不正确的道具

<... onchange="checkvalue(this)" ... />

传递非字符串值（包括内插字符串）的正确方法是将其包裹在大括号{} 上。将更改回调传递给的正确道具是onChange。

<... onChange={checkvalue(this)} ... />

【讨论】：

onChange={checkvalue(this)} 将在渲染期间立即执行该函数。您可能希望将其更改为 onChange={(e) => checkvalue(e.target)}

【解决方案4】：

改变

<input type="checkbox" onchange="checkvalue(this)"/>

到

<input type="checkbox" onChange={checkValue}/>

和

  function checkValue(event) {
    if (event.target.checked) {
      alert("hi");
    } else {
      alert("bye");
    }
  }

【讨论】：