Jquery React.js-将输入框设置为已编辑的值

我是react.js的初学者，现在正在做一个小项目。这里我想做的是，一旦你双击一个文本，它就会变成一个文本框，允许你输入一些文本。如果单击“X”，则显示初始值；如果单击“确定”，则显示编辑后的值

但我有个小问题。当我在导航到另一个页面后导航回该页面时，该值将更改为初始状态。但是我想保留编辑的值，直到我更改它，而不是初始值。我该怎么做？任何帮助都将不胜感激

render() {
    return (
     <tr>
       <td>
        {this.state.isInEditMode ? this.editView() : this.defaultView()}
       </td>
     <tr>
    );
} 

render（）{
返回(
{this.state.isInEditMode？this.editView（）：this.defaultView（）}
);
} 

状态={
值：“此处有一些文本”，
isInEditMode:false
}
changeEditMode=（）=>{
这是我的国家({
isInEditMode:！this.state.isInEditMode
})
}
updateComponentValue=（）=>{
这是我的国家({
isInEditMode:false，
值：this.refs.thettemput.value
})
}
编辑视图=（）=>{
返回
X
好啊
}
defaultView=（）=>{
返回{this.state.value}
} 

参考：

这是我的App.js文件

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';

import deliveryDetails from './components/deliveryDetails.component';
import Index from './components/index.component';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <Link to={'/'} className="navbar-brand">Payment</Link>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                <Link to={'/create'} className="nav-link">Create</Link>
                </li>
                <li className="nav-item">
                  <Link to={'/index'} className="nav-link">Index</Link>
                </li>
              </ul>
            </div>
          </nav> <br/>
          <Switch>
              <Route exact path='/create' component={ deliveryDetails } />              
              <Route path='/index' component={ Index } />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./components/deliveryDetails.component”导入deliveryDetails；
从“./components/Index.component”导入索引；
类应用程序扩展组件{
render（）{
返回(
付款


创造


指数




);
}
}
导出默认应用程序；

上面的编辑表文本位于索引路径中。当我从创建路由导航回索引路由时，它的值更改为默认值。

在

defaultView（）=>{}

使用

this.setState

将状态设置为

defaultView（）=>{}

---

使用

this.setState

将状态设置为您想要的值，如果您要在以下位置导航：

window.location.href = '/YOUR_ROUTE';

然后，每次导航到另一个页面时，您的状态都将重置，并且isInEditMode变量将返回默认值（false），而不显示输入。 我建议你试试。在另一个帖子里有更好的解释

但基本上，您应该使用，以防止页面中的状态重置：

this.props.history.push('/YOUR_ROUTE');

---

如果您通过以下方式导航：

window.location.href = '/YOUR_ROUTE';

然后，每次导航到另一个页面时，您的状态都将重置，并且isInEditMode变量将返回默认值（false），而不显示输入。 我建议你试试。在另一个帖子里有更好的解释

但基本上，您应该使用，以防止页面中的状态重置：

this.props.history.push('/YOUR_ROUTE');

---

我在用路由器。在标签内部，我有两个链接

Create

Index

。在标记内部我有这两条路由路径。

。上面的函数在“index”内部，当我导航到“create”时它返回默认值。你能告诉我在哪里必须提到这个。props.history.push（“/”）？我必须用路由器从react router dom右侧导入？尝试替换或标记的链接标记。然后，使用包含this.props.history.push语句的函数处理导航。例如，

，然后，

函数handleCreateNavigation（）{this.props.history.push（'/create'）}

我正在使用react路由器。在标签内部，我有两个链接

Create

Index

。在标记内部我有这两条路由路径。

。上面的函数在“index”内部，当我导航到“create”时它返回默认值。你能告诉我在哪里必须提到这个。props.history.push（“/”）？我必须用路由器从react router dom右侧导入？尝试替换或标记的链接标记。然后，使用包含this.props.history.push语句的函数处理导航。例如

，然后，

函数handleCreateNavigation（）{this.props.history.push（'/create'）}

嘿，谢谢你的回答！你能解释一下吗？这将有助于OP和未来的读者：）嘿，谢谢你的回答！你能解释一下吗？这将有助于OP和未来的读者：）