在React/NextJS中如何将renderDetailPanel的row数据传入handleSubmit函数

核心问题原因 #

你写的handleSubmit函数在外部作用域，无法直接访问renderDetailPanel内部的row变量，所以直接调用row.original.ExampleData会报错或无效。

方案一：点击时传递row参数（推荐） #

修改handleSubmit让它接收row作为参数，然后在按钮的onClick事件里通过匿名函数把row传进去：

const handleSubmit = async (e, row) => {
    e.preventDefault();
    // 现在能正常拿到row数据了
    setExampleData(row.original.ExampleData);
}

renderDetailPanel={({ row }) => (
    <Button onClick={(e) => handleSubmit(e, row)}>Action something to {row.original.info}</Button>
)}

方案二：在renderDetailPanel内部定义handleSubmit #

如果不想修改外部函数的参数，可以把handleSubmit直接定义在renderDetailPanel的回调里，这样它自然能访问到row：

renderDetailPanel={({ row }) => {
    const handleSubmit = async (e) => {
        e.preventDefault();
        setExampleData(row.original.ExampleData);
    }
    return (
        <Button onClick={handleSubmit}>Action something to {row.original.info}</Button>
    )
}}

注意：这个方法每次渲染renderDetailPanel都会创建新的handleSubmit函数，小体量组件用着没问题，大型列表组件建议用方案一避免不必要的重渲染。

关于你之前TextField onChange报错的问题 #

你之前在onChange里设置setExampleData(row.original.ExampleData)提示undefined，大概率是组件渲染时row还未初始化，或者row.original不存在。可以用可选链操作符?.做安全访问：

<TextField
    autoFocus
    margin="dense"
    id="message"
    value={message}
    label="Message"
    onChange={(e) => {
        setMessage(e.target.value);
        // 用?.避免访问undefined属性报错
        setExampleData(row?.original?.ExampleData);
    }}
/>

内容的提问来源于stack exchange，提问作者supernewBs