Question

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

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

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

    state = {
      value:"Some Text Here",
      isInEditMode:false
    }

    changeEditMode = () =>{
      this.setState({
        isInEditMode:!this.state.isInEditMode
      })
    }
    updateComponentValue = () =>{
      this.setState({
        isInEditMode:false,
        value:this.refs.theTextInput.value
      })
    }

    editView = () =>{
     return <div>
       <input type="text" defaultValue={this.state.value} ref="theTextInput"/>
       <button onClick={this.changeEditMode}>X</button>
       <button onClick={this.updateComponentValue}>OK</button>
       </div>
    }
    defaultView = () =>{
      return <div onDoubleClick={this.changeEditMode}>{this.state.value}</div>
    }

ref：https://www.youtube.com/watch?v=WTh54FMNrbU

这是我的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;

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

Answer 1

在public class SearchResultsApiController : UmbracoApiController { private readonly IMediator _mediator; public SearchResultsApiController(IMediator mediator) { _mediator = mediator; } } 将defaultView()=> {}的状态设置为您想要的值

Answer 2

如果您要浏览：

window.location.href = '/YOUR_ROUTE';

然后，每次浏览到另一个页面时，状态都会重置，并且isInEditMode变量将返回默认值（false），而不显示输入。我建议您尝试react-router。在另一个线程中有一个更好的解释

https://stackoverflow.com/a/52726411/12705405

但是基本上，您应该使用history navigation来防止页面中的状态被重置：

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

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

2 个答案: