如何在reactjs中使用on change事件(hooks)

Question

我需要通过onchange点击标签组件来改变activeTab，我想我需要使用reacts钩子。但我仍然不明白它是如何工作的，这段代码会产生错误。

'handleChange未定义'

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

请你帮忙，因为我已经卡住了？

Answer 1

这不是类组件。你使用的是公共类方法。因为，你是在功能组件中使用它，它只是一个函数，但这个函数还没有被声明。所以，你只需要定义它。

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)

如果你对钩子不了解，那你可以多了解一下。此处.