如何在 reactjs 中使用更改事件（钩子）

Question

我需要通过 onchange 单击选项卡组件来更改 activeTab。 我想我需要使用反应钩子。但我仍然无法理解它是如何工作的。 此代码抛出错误

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

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

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)

如果您不了解 hooks，那么您可以了解更多关于它的信息here。