Question

我在使用由redux-form的Form组件的onSubmit调用的函数中的状态时遇到问题。

我需要访问给定的状态，选项卡和currentTab。第一个是选项卡数组，第二个是指示符，指示用户当前位于哪个选项卡。

我尝试使用click事件处理提交，一切正常。

将状态作为参数传递不起作用。例如

<Form onSubmit={() => submit(currentTab, tabs.length)}>
  ...
</Form>

它仍然使用默认状态0。

我也尝试过使用装饰组件提供的handleSubmit道具，但是运气不好。

问题在于，提交事件发生时，函数内部的状态与实际状态不符。

const [tabs, setTabs] = useState([])
const [currentTab, setCurrentTab] = useState(0)
console.log('outside', tabs.length); // outside 2
const submit = () => { 
  console.log('inside', tabs.length); /* inside 0  <- still the 
  default value provided to useState */
  if (tabs.length == currentTab + 1) {
    props.onSubmit();
  } else {
    handleNextTab();
  }
};
<Form onSubmit={submit}>
  ...
</Form>

由于选项卡是动态的并且长度可以变化，因此我希望能够将tabs.length与currentTab进行比较，以了解用户是否位于最后一个选项卡中，以根据结果触发不同的操作。

Answer 1

如果在渲染Form时状态为true，则可以使用onSubmit处理程序，并将状态传递给处理程序。

我在想：

<Form onSubmit={handleSubmit(tabs, currentTab)}>
  ...
</Form>

并且：

const handleSubmit = (tabs, currentTab) => {
    return () => {
        // Do something with `tabs`, and `currentTab` here
    };
};

另请参阅（相关）：https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

Answer 2

您需要将制表符作为参数传递给您的Submit函数。

如何在onSubmit调用的函数中使用状态？

2 个答案: