时间戳

首页 > 解决方案 > 使用 React 在 onClick 处执行两个函数

javascript - 使用 React 在 onClick 处执行两个函数

问题描述

我目前有这个表，当用户单击按钮时，它会切换到“editForm”状态，但我还想在用户单击按钮时更改 idColab 状态，我该如何实现呢？

obs：ID 作为参数传递。

const [editForm, setEditForm] = useState(false)
const [idColab, setIdColab] = useState("")


const exibirForm = () => {
        setEditForm(!editForm)
}

const setIdColab = (id) => {
        idColab = id
}

ID 来自此映射：

const renderTable = () => {
        return data.map((colaborador, idx) => {
            const {id, nome, matricula, funcao, tipo_acesso, cpf} = colaborador

            return (
                <tr>
                    <td className='data-cell'>{nome}</td>
                    <td className='data-cell'>{matricula}</td>
                    <td className='data-cell'>{newFuncao}</td>
                    <td className='data-cell'>{newAcesso}</td>
                    <td className='data-cell'>{cpf}</td>
                    <td className='data-cell'>{id}</td>
                    <td className='btn-cell'><input className="edit-btn" type="submit" value="Editar" onClick={exibirForm(id)} /></td>
                </tr>
            ) 
        })
    }

标签： javascriptreactjsonchange

解决方案

选项1

通过在被调用函数中添加代码：

const exibirForm = () => {
  setEditForm(!editForm)
  setInput({ idColab: "1234"  });
}

选项 2

通过创建一个调用更多函数的函数

const masterFunction = () => {
  function1();
  function2();
  // ... more functions ...
}

或者更紧凑：

<input onClick={() => { function1(); function2(); }} />

推荐阅读