Question

我有两个组件，一个组件用于处理按钮，另一个组件是页面的索引。

页面的索引结构如下

const MainComp = () => {
    const [text, setText] = useState(' ')

    const test = [
        'One',
        'Two',
        'Three',
    ]

    return (
        <>
            <ChildComp onClick={() => test.map((i) => setText(i))} /> 
            {text}
        </>
    )
}

在按钮组件中，我有这个...

const ChildComp = ({ onClick }) => {
    const test2 = [1,2,3]

    return (
        <>
            <div>
                {test2.map((data) => (
                    <button onClick={onClick}>
                        {data}
                    </button>
                ))}
            </div>
        </>
    )
}

我希望单击按钮时显示test中每个项目的值。

Answer 1

尝试一下：

...
const test2 = [1, 2, 3]

const onClick = (item) => alert(item)

return (
  <>
    <div>
      {test2.map((data) => (
        <button onClick={() => onClick(data)}>{data}</button>
      ))}
    </div>
  </>
)

Answer 2

尝试下面的代码

WndProcHooker messageHooker = (WndProcHooker)this.reference.Target;
retval = messageHooker.MessageHookProc(nCode,wParam,lParam, ref processMessage);

Answer 3

为什么不尝试使用props将数据从Main发送到Child页面呢？您可以按以下步骤进行操作：

主页代码：

import React from 'react'
import Child from './Child'

const Main = ()=>{

const data = ["one","two","three"];

    return(
        <div>
        <Child data={data}/>            
        </div>
    )
}

export default Main;

子页面代码：

import React from 'react'

const Child =({data})=>{

    const getData=()=>{
        console.log(data)
    }
    return(
        <div>
            <button onClick={getData}>Transfer Data</button>
        </div>
    )
}

export default Child;

这样，当您单击按钮时，来自主页的数据将传输到子页面。现在，数据正在控制台中显示。但是，嘿，您是从另一个页面获取数据的，现在您可以执行任何操作。

在React中将onClick值从一个组件传递到另一个组件

3 个答案: