如何在 reactjs 中使用 on change 事件（钩子）

Question

我需要通过 onchange click on tab 组件来更改 activeTab。我想我需要使用反应钩子。但我仍然不明白它是如何工作的。此代码抛出错误

'handleChange is not defined'

function TobaccoLine({ match, location  }) {
   const activeTab = useSelector(state => location.state ? location.state.activeTab : 0);

   handleChange = (event, value) => {
      this.setState({ activeTab: value });
   }

    return (
         <div className="userProfile-wrapper">
                     <Tabs
                        value={activeTab}
                        onChange={handleChange}
                        variant="scrollable"
                        scrollButtons="off"
                        indicatorColor="primary"
                     >
...

你能帮忙吗，因为我已经卡住了？反应 JS v16+

Answer 1

这不是 class 组件。您使用的方式是 public class 方法。因为，您在功能组件中使用它，所以它只是一个函数，但尚未声明该函数。所以，你只需要定义它：

const handleChange = (event, value) => {
  this.setState({ activeTab: value }); // Next problem: See below.
}

之前，您得到的 handleChange 是 undefined 因为您使用的是没有 var、let 或 const 声明。

下一个问题：您在不适用的功能组件内部使用了this.setState。您需要使用 useState 钩子：

const [activeTab, setActiveTab] = useState('') // empty initial state, change it
// To set state:
setActiveTab('your value')
// To get state:
console.log(activeTab)

如果你不了解hooks，那么你可以了解更多here。

如何在 reactjs 中使用 on change 事件（钩子）

How use on change event in reactjs (hooks)

javascript

onchange

setstate

reactjs

react-hooks