如何使用onclick Reactjs函数组件调用或使用.js文件

Question

我有一个名为Edit的.js文件，用于编辑目的。我有另一个。js文件称为添加。我有一个对话框在编辑。js将打开，当我点击一个按钮。但我不想用按钮我想要的是当我点击任何地方时得到一个对话框。我试着在div标签中使用onclick，但我没有得到任何响应。这是输出所以如果你观察到我们有一个编辑按钮，如果点击它，我得到编辑内容的表单/对话框。但是我希望当我点击黄色框上的任意位置时，窗体或对话框都会打开。

<div id='color' className='div2' key={item.id} style={{width: 340,
# border: '5px solid white',textIndent:-30,paddingRight:32,paddingLeft:40,whiteSpace:'pre',paddingTop:15, backgroundColor:item.currentColor}} onClick={()=>{editpage(item.id)}} >

这是我用来调用函数获取表单在另一个。js文件。它是映射函数的一部分。我使用了一个onclick事件每当我点击div标签下的框或内容时我都需要转到那个函数然后点击edit，然后form但是它不起作用

它要执行的函数是这样的:

const editpage=(id)=>{ <Edit id={id}></Edit> }

我想发送一个id作为传递给Edit.js的参数。我使用<Edit/>是因为它是我在Add.js文件中导入的另一个js文件。

我无法得到输出，你可以请我与这个。我怎么使用这个当我点击颜色框应该打开一个窗体，实际上是在另一个文件。

Answer 1

这成功地调用了click事件的函数:

onClick={()=>{editpage(item.id)}}

但是这个函数是做什么的?绝对没有什么:

const editpage=(id)=>{ <Edit id={id}></Edit> }

这个函数不返回任何东西(当然不是从点击处理程序返回任何东西)，不执行任何操作，什么都没有。它只是一个单独的JSX表达式。

采用完全不同的方法。将组件添加到标记中，但将其包装在基于状态的条件中。例如，考虑以下状态值:

const [openEditPage, setOpenEditPage] = useState();

这个状态值的目的是跟踪哪个item.id当前应该有它的"编辑"。组件可见。(默认为undefined，因此默认情况下没有可见的)

在呈现组件时使用此值:

<div id='color' className='div2' key={item.id} style={/*...*/} onClick={()=>{editpage(item.id)}}>
{openEditPage === item.id ? <Edit id={item.id}></Edit> : null}
</div>

所以在这种情况下，<Edit>组件只会在openEditPage === item.id时呈现。这就是editpage()函数可以做的:

const editpage = id => setOpenEditPage(id);

单击<div>将调用editpage函数，该函数更新状态值，从而触发重新呈现，并且在新的呈现中显示<Edit>组件，因为条件将是true。