Javascript 防止在React中提交时刷新页面

我正在尝试创建一个可编辑表，一旦单击该表，该表将把特定单元格转换为

，然后在用户按return键时运行

handleSubmit（）

方法

下面是一个使用

onClick

事件运行

handleClick（）

方法并将其

转入

的

单元格示例

this.handleClick（e）}style={{padding:'5px'}}key={cellID}id={cellID}>{frame.rows[i][idx]}
handleClick（e:React.MouseEvent）{
如果（this.state.editing==false）{
设form=`this.handleSubmit（e）}>`
e、 currentTarget.innerHTML=表单；
}       
this.setState（{editing:true}）
}
handleSubmit（e）{
e、 预防默认值（）
}

---

在此实例中，使用e.preventDefault（）似乎不起作用。每次我在更改文本后按return键，页面都会刷新。在这种情况下，如何阻止页面刷新？

您好，您可以按如下方式使用它：

1-我假设您有一个返回按钮，如下所示，这样您就可以不使用表单提交事件提交返回：

_handleReturn(){
let val = document.getElementById("your input id");
//you can post above text to server if you want
   //Do Somthing
}
<button id="btn_return" onClick={this._handleReturn} />

\u handleReturn（）{
让val=document.getElementById（“您的输入id”）；
//如果需要，您可以将上述文本发布到服务器
//干坏事
}

---

2-我不知道在哪里触发handleSubmit，但提交表单会导致刷新，如果不想，您应该使用ajax。

您好，您可以按如下方式使用它：

1-我假设您有一个返回按钮，如下所示，这样您就可以不使用表单提交事件提交返回：

_handleReturn(){
let val = document.getElementById("your input id");
//you can post above text to server if you want
   //Do Somthing
}
<button id="btn_return" onClick={this._handleReturn} />

\u handleReturn（）{
让val=document.getElementById（“您的输入id”）；
//如果需要，您可以将上述文本发布到服务器
//干坏事
}

---

2-我不知道在哪里触发handleSubmit，但提交表单会导致刷新，如果不想，应该使用ajax。

我猜您希望实现一些功能，可以编辑列、修改或放弃更改，然后根据需要更新内容

这个例子是关于本地状态的，但是您仍然可以通过获取数据来实现

单击下面的“运行代码片段”查看工作示例

//main.js
const{useState}=React；
常量应用=（）=>{
//陈述
const[data，setData]=useState（[{id:1，name'John，editing:false}，{id:2，name'Kevin，editing:false}]）；
//功能
const onSubmitForm=index=>event=>{
//防止表格提交
event.preventDefault（）；
//防止td再次点击
event.stopPropagation（）；
const newData=[…data]；
newData[index].name=newData[index].temp；
newData[index]。编辑=false；
删除新数据[index].temp；
setData（newData）；
}
const onClickToggleEditing=index=>event=>{
//防止td onClick和按钮在切换回on时相互冲突
event.stopPropagation（）；
const newData=[…data]；
newData[index]。编辑=！newData[index]。编辑；
newData[index].temp=newData[index].name；
setData（newData）；
}
const onInputChange=index=>event=>{
const newData=[…data]；
newData[index].temp=event.target.value；
setData（newData）；
}
//渲染
//这基本上就像有自己的组件一样
常量编辑=（数据、索引、onChange、onSubmit、onCancel）=>{
const onKeyUp=index=>event=>{
如果（event.key==='Escape'）{
onCancel（索引）（事件）；
}
}
返回e.stopPropagation（）}type=“text”value={data.temp}占位符=“Enter text”onChange={onChange（index）}/>保存取消
}
返回
表格编辑
单击以编辑“名称”的单元格

身份证件
名称
{data&&data.length>0&&
{data.map（（i，k）=>
{i.id}
{i.editing？编辑（i，k，onInputChange，onSubmitForm，onClickToggleEditing）：i.name}
)}
}

数据操作：

}
ReactDOM.render（，document.querySelector（'#root'）
正文{
填充：0；
保证金：0；
字体系列：Arial，无衬线；
}
主要{
填充：0 20px；
}
h1{
字号：18px；
}
桌子{
宽度：100%；
边界间距：0；
}
表tr td，
表tr-th{
边框：1px实心#EFEF；
高度：30px；
线高：30px；
文本对齐：左对齐；
填充：6px；
}
表tr th：第一个孩子{
宽度：100px；
}
.可编辑：悬停{
背景：#efef；
光标：指针；
}
表输入{
高度：30px；
线高：30px；
字体大小：14px；
填充：0 6px；
右边距：6px；
}
桌子按钮{
高度：32px；
边界：无；
背景：红色；
颜色：白色；
字体大小：14px；
填充：0 10px；
边界半径：4px；
右边距：5px；
光标：指针；
}
表格按钮[类型=提交]{
高度：32px；
边界：无；
背景：绿色；
颜色：白色；
字体大小：14px；
填充：0 10px；
边界半径：4px；
}
人力资源{
边界：无；
高度：1px；
背景：#999；
利润率：20px0；
}
前{
背景：#efef；
填充：6px；
}
我猜您希望实现一些功能，您可以编辑列、修改或放弃更改，然后根据需要更新内容

这个例子是关于本地状态的，但是您仍然可以通过获取数据来实现

单击下面的“运行代码片段”查看工作示例


//main.js
const{useState}=React；
常量应用=（）=>{
//陈述
const[data，setData]=useState（[{id:1，name'John，editing:false}，{id:2，name'Kevin，editing:false}]）；
//功能
const onSubmitForm=index=>event=>{
//防止表格提交
event.preventDefault（）；
//防止td再次点击
event.stopPropagation（）；
const newData=[…data]；
newData[index].name=newData[index].temp；
newData[index]。编辑=false；
删除新数据[index].temp；
setData（newData）；
}
有限公司
<td onClick={ e => this.handleClick(e)} style={{padding:'5px'}} key={cellID} id={cellID}>{frame.rows[i][idx]}</td>

// JSX snippet
<td onClick={ e => this.handleClick(e)} 
    style={{padding:'5px'}} 
    key={cellID} id={cellID}>
    {this.state.editing ? <Input ... /> : <Label ... />}
</td>

let form = `<form onSubmit=${ (e:any) => {this.handleSubmit(e)} } ><input type="text" value=${e.currentTarget.innerText} className="input-small gf-form-input width-auto"/></form>`

handleSubmit(e) {
  e.preventDefault()        
}

e.currentTarget.innerHTML =  form;