reactjs - 我使用 Node React 在我的 Shopify 应用程序中设置了状态

Question

我正在使用 Shopify Polaris 制作 Shopify 应用。我使用了 ActionList 组件。 https://polaris.shopify.com/components/actions/action-list

我想更改 onAction 事件的状态值。我确实喜欢这个。

   const [searchValue, setSearchValue] = useState('');
   const handleAction = (value) => {
      setSearchValue(value);
   }
   const a = ["A","B"];

   const searchResultsMarkup = (

    <ActionList
       items={[
            {
              content: a[0],
              onAction: handleAction(a[0]),
            },
            {
              content: a[1],
              onAction:  handleAction(a[1]),
            },
    />
    
  );

我是 React 的初学者。所以也许是一个愚蠢的问题。但请教我。

谢谢

Answer 1

您将它作为道具传递，因此您必须在组件中更改它。

import React, { useState } from 'react';

export const Parent = () => {
  const [searchValue, setSearchValue] = useState('');
  const handleAction = value => {
    setSearchValue(value);
  }
  return <ActionList changeSearchVal={handleAction} />
}

export const ActionList = ({ changeSearchVal }) => {
  return (
    <form>
      <input type="text" onChange={e => changeSearchVal(e.target.value)}/>
    </form>
  )
}

如果要更改 ActionList 中的 searchValue。