在自定义反应组件中添加一个on Click事件

Question

我有一个react组件验证editationeditor 调用另一个自定义react component 属性，该保存属性 value a >字符串数组。

interface props extends ValidationDataProperty {
  tree: Tree;
}

const ValidationEditor = ({ tree, id, ifData, thenData, elseData }: props) => {
  const { classes } = useStyles();
  const { state, dispatch } = useContext(PropertyContext);
  const updateValidation = modifyConditionalProperty(id, dispatch);
  return (
    <Group className={classes.validator}>
      <Box></Box>
      <Text>If</Text>
      <Property
        value={[""]}
        mode="edit"
        tree={tree}
        onClick={(e: { target: { value: SetStateAction<string[]> } }) =>
          updateValidation({ ifData: { ...ifData, value: e.target.value } })
        }
      />
      <NativeSelect
        data={_.keys(ComparisonType)}
        required
        value={ifData.comparison}
        onChange={(e: { target: { value: SetStateAction<string> } }) =>
          updateValidation({
            ifData: { ...ifData, comparison: e.target.value },
          })
        }
      />{" "}
      <TextInput
        placeholder="Provide conditional value"
        required
        value={ifData.value}
        sx={{ flex: 1 }}
        onChange={(e: { target: { value: SetStateAction<string> } }) =>
          updateValidation({ ifData: { ...ifData, value: e.target.value } })
        }
      />
      
    </Group>
  );
};

export default ValidationEditor;

现在，我想将 onclick 事件添加到属性 React组件。基本上 onclick 我想调用 action - ＆gt; modifyConditionalProperty（id，dispatch），将更新商店通过还原> 。我只是在努力使其仅适用于我的自定义 react component 属性静止的工作正常。

这就是属性 组件看起来像

interface PropertyProps {
  value?: string[];
  mode: "edit" | "display";
  tree: Tree;
  onClick?: (e: { target: { value: SetStateAction<string[]> } }) => void;
}

const Property = ({ value, mode, tree }: PropertyProps) => {
  const [currentValue, setCurrentValue] = useState<string[]>(value || []);
  const [displayMode, toggle] = useToggle(mode, ["edit", "display"]);
  console.log(value) // ["a", "b", "c"]
  
  return (
    <Box>
      .....
    </Box>
  );
};

export default Property;