防止在 React 中提交时刷新页面
我正在尝试创建一个可编辑的表格，该表格将在单击特定单元格后将其转换为一个<input>，然后handleSubmit()在用户按下返回后运行该方法。
下面是一个单元格的示例，该<td>单元格使用onClick事件运行handleClick()方法并将其转换<td></td>为<form><input></input></form>.
<td onClick={ e => this.handleClick(e)} style={{padding:'5px'}} key={cellID} id={cellID}>{frame.rows[i][idx]}</td>
handleClick(e:React.MouseEvent<HTMLTableDataCellElement, MouseEvent>) {
if(this.state.editing == false){
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>`
e.currentTarget.innerHTML = form;
}
this.setState({editing: true})
}
handleSubmit(e){
e.preventDefault()
}
在这种情况下，使用 e.preventDefault() 似乎不起作用。每次更改文本后按回车键，页面都会刷新。在这种情况下如何阻止页面刷新？
饮歌长啸浏览 278回答 3
3回答
-
素胚勾勒不出你
我猜你想要实现一些东西，你可以编辑列，修改或放弃更改，然后根据需要更新内容。这个例子是本地状态，但你仍然可以通过获取数据来做到这一点。单击下面的“运行代码片段”以查看工作示例。// main.jsconst { useState } = React;const App = () => { // State const [data, setData] = useState([{ id: 1, name: 'John', editing: false }, { id: 2, name: 'Kevin', editing: false }]); // Functions const onSubmitForm = index => event => { // To prevent form submission event.preventDefault(); // To prevent td onClick event.stopPropagation(); const newData = [...data]; newData[index].name = newData[index].temp; newData[index].editing = false; delete newData[index].temp; setData(newData); } const onClickToggleEditing = index => event => { // To prevent td onClick and button conflicting with each other for toggling back on event.stopPropagation(); const newData = [...data]; newData[index].editing = !newData[index].editing; newData[index].temp = newData[index].name; setData(newData); } const onInputChange = index => event => { const newData = [...data]; newData[index].temp = event.target.value; setData(newData); } // Render // This basically like having its own component const editing = ( data, index, onChange, onSubmit, onCancel) => { const onKeyUp = index => event => { if (event.key === 'Escape') { onCancel(index)(event); } } return <form onSubmit={onSubmit(index)}><input onKeyUp={onKeyUp(index)} onClick={e => e.stopPropagation()} type="text" value={data.temp} placeholder="Enter text" onChange={onChange(index)} /><button onClick={onSubmit(index)} type="submit">Save</button><button type="button" onClick={onCancel(index)}>Cancel</button></form> } return <main> <h1>Table Editing</h1> <p><small>Click to edit cell for <b>Name</b>.</small></p> <table> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> {data && data.length > 0 && <tbody> {data.map((i, k) => <tr key={`row-${k}`}> <td>{i.id}</td> <td className="editable" onClick={onClickToggleEditing(k)}>{i.editing ? editing(i, k, onInputChange, onSubmitForm, onClickToggleEditing) : i.name}</td> </tr>)} </tbody>} </table> <hr /> <p><b>Data Manipulation:</b></p> <pre><code>{JSON.stringify(data, null, '\t')}</code></pre> </main>}ReactDOM.render(<App />, document.querySelector('#root'));body { padding: 0; margin: 0; font-family: Arial,sans-serif;}main { padding: 0 20px;}h1 { font-size: 18px;}table { width: 100%; border-spacing: 0;}table tr td,table tr th { border: 1px solid #efefef; height: 30px; line-height: 30px; text-align: left; padding: 6px;}table tr th:first-child { width: 100px;}.editable:hover { background: #efefef; cursor: pointer;}table input { height: 30px; line-height: 30px; font-size: 14px; padding: 0 6px; margin-right: 6px;}table button { height: 32px; border: none; background: red; color: white; font-size: 14px; padding: 0 10px; border-radius: 4px; margin-right: 5px; cursor: pointer;}table button[type=submit] { height: 32px; border: none; background: green; color: white; font-size: 14px; padding: 0 10px; border-radius: 4px;}hr { border: none; height: 1px; background: #999; margin: 20px 0;}pre { background: #efefef; padding: 6px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="root"></div> -
30秒到达战场
您的代码中有一些问题。我最好修复它们，而不是尝试解决表单提交的问题。一旦完成，您将不必解决表单的问题 - 根本不会有任何问题。首先，让我们看一下您的可编辑单元格：<td onClick={ e => this.handleClick(e)} style={{padding:'5px'}} key={cellID} id={cellID}>{frame.rows[i][idx]}</td>这个元素应该根据某些状态以不同的方式呈现。我们可以使用 React 轻松实现这一点：// JSX snippet<td onClick={ e => this.handleClick(e)} style={{padding:'5px'}} key={cellID} id={cellID}> {this.state.editing ? <Input ... /> : <Label ... />}</td>我没有提供所有代码，因为我相信这些组件是不言自明的（欢迎您随意命名它们，我给它们起非常简单的名称以明确其目标）。<Input />封装了与编辑逻辑相关的所有内容<Label />简单地呈现一个文本或你需要的任何东西（可能frame.rows[i][idx]）...意味着他们很可能会有一些值/处理程序作为道具传递在你的代码中，你有这个：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>`我相信它应该是一个独立的组件，有自己的状态和逻辑（例如提交）。事实上，这就是<Input ... />我的例子。如果你把它作为一个单独的组件 - 以下代码将起作用（因为它将成为该单独组件的一部分）：handleSubmit(e) { e.preventDefault() }最后，避免做这样的事情：e.currentTarget.innerHTML = form;重新考虑你的方法，你根本不需要做那样的事情。 -
绝地无双
您可以像下面这样使用它：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} />2-我看不到你在哪里触发了handleSubmit，但是提交表单会导致刷新，如果你不想的话，你应该使用ajax。
随时随地看视频慕课网APP
相关分类
JavaScript