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

问题描述

我正在使用 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 的初学者。 所以也许是一个愚蠢的问题。 但请教我。

谢谢

解决方法

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

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。