ReactJS -将选定的变量从列表传递到呈现

Question

我目前正在学习ReactJS，我想从列出的几个项目中选择一个，并将其显示在Flex中(来自Patternfly)。

const locals = ['Camera', 'Car', 'Monitor'];
function showItem(loc) {
  console.log(loc)
  return(loc);
}

const listLocals = locals.map((locals) =>
    <text stroke="black" onClick={() => (showItem(locals))}>{locals}</text>
);

ReactDOM.render(
  <React.StrictMode>
    <Grid hasGutter>
    <GridItem span={4} rowSpan={2}>
    {listLocals}
    </GridItem>
    <GridItem span={2} rowSpan={3}>

  <Card isHoverable isFullHeight>
    <CardTitle>Information Panel</CardTitle>
    <CardBody>
        <Flex>
            <FlexItem>Selected:</FlexItem>
            <FlexItem>{showItem}</FlexItem>
        </Flex>
    </CardBody>
  </Card>
    </GridItem>
  </Grid>
  </React.StrictMode>,
  document.getElementById('root')
);

我试过了，但几个小时后我就完成了，我只是感到沮丧;D In：console.log(loc)我看到了我选择的东西，但无法通过它，我知道我可能正在做一些非常愚蠢的事情，但是，请告诉我在哪里:D

谢谢你的任何帮助，或提示。

Answer 1

提示:您可以使用状态变量来显示所选的本地。Step1:将状态变量初始化为const showItem，updateShowItem=useState(null) Step2:在单击方法中调用具有选定值的updateShoeItem函数作为updateShowItem(loc) Step3:在ur jsx中使用showItem变量

在这里，当你的状态发生变化时，react组件将使用最新的值重新呈现。

Answer 2

将代码从索引移动到应用组件=)

您需要：

1. 添加状态about state。about hook useState

const [selected, setSelected] = useState('')

1. Add event onClick

        {locals.map((local, idx) => 
          <text key={idx} onClick={() => setSelected(local)}>{local}</text>
        )}

1. 添加所选项目的输出

<span>Selected: {selected}</span>

CodeSanbox demo