如何使用功能组件更改组件道具 onClick？答案

【问题标题】：How would I change the component props onClick with a functional component?如何使用功能组件更改组件道具 onClick？
【发布时间】：2021-09-03 02:16:30
【问题描述】：

我正在尝试更改道具 onClick 的值。基本上，如果枚举设置为一，则模型设置为仅显示一个输入栏，反之亦然。如何使用 onClick 函数切换道具的值？以下是我到目前为止所尝试的。现在我收到以下错误：“'boolean' 类型的参数不可分配给 'SetStateAction' 类型的参数”

 const [pickInput, setPickInput] = useState(search.inputs)

       <Breadcrumb
      borderBottom={'1px'}
      borderColor={'white'}
      color={'white'}
      separator=""
      
    >
      <BreadcrumbItem>
        <Button color={'white'} variant='link' onClick={() => setPickInput(pickInput === 'two')}>Search by location</Button>
      </BreadcrumbItem>
      <BreadcrumbItem>
      <Button color={'white'} variant='link' onClick={() => setPickInput(pickInput === 'one')} >Search by keyword</Button>
      </BreadcrumbItem>
    </Breadcrumb>

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

你应该在声明pickInput时添加boolean类型

 const [pickInput, setPickInput] = useState<Enum_Search_Inputs | null | undefined | boolean>(search.inputs)

【讨论】：

确实消除了错误；但是，目标是更改道具 onClick 的值，但它没有这样做。我可能设置错了吗？
change the value of the prop onClick 是什么意思？
props 值 (search.inputs) 决定了在组件中显示多少输入。所以如果 search.inputs = 'one' 只显示一个输入；而如果是“两个”，则显示两个输入。所以我分配 onClick 的按钮应该在点击时在一个输入和两个输入之间切换

【解决方案2】：

您似乎正在尝试将状态设置为布尔值而不是一或二。如果您尝试将状态设置为单词“一”或“二”，您的函数应该如下所示，但我绝对建议使用整数。

() => setPickInput("one")}

() => setPickInput("two")}

现在，您实际上是在设置状态 (pickInput === 'one') 的函数内部进行比较，这将根据变量 pickInput 的值是否为 ' 向 setPickInput 函数返回一个布尔值one' 而不是在其中实际设置一个值。

React Docs link to hooks and state

JS Comparisons documentation

【讨论】：

这是有道理的。所以 search.inputs 实际上是一个模型上的枚举，它决定了组件中显示了多少输入。所以我试图将枚举的值从“一”更改为“二”onClick。这更有意义吗？
是的，这是有道理的。不过，仅供参考，使用“一”、“二”、“三”等值的枚举可能是不好的做法。尝试换掉枚举的键或者考虑让你的对象成为一个标准的 JS 对象。
对，大多数时候，这不是我要走的路；然而，就项目所涉及的技术而言，这里实际上是最有意义的

【解决方案3】：

我可以通过设置一个使用状态来设置点击值的函数来解决这个问题。

      function searchLocationHandler() {
    setPickInput('two')
    search.inputs = 'two'
  }
  function searchKeywordHandler() {
    setPickInput('one')
    search.inputs = 'one'
  }

【讨论】：