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

Question

我目前有这个 table，当用户单击按钮时它会切换到“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>
            ) 
        })
    }

Answer 1

选项 1

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

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

选项 2

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

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

或者更紧凑：

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

Answer 2

创建一个调用其中两个函数的父函数，并将父函数传递给您的事件侦听器。

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

Execute two functions at onClick with React

javascript

onchange

reactjs

选项 1

选项 2