Question

我正在尝试编辑和更新React中的一些文本。我正在尝试使用提示，但我不确定这是否正确。我在console.log this.state.newText时没有显示任何内容。有没有更好的方法来更新文本？我在HTML中使用表格，因此使用输入会导致错误。谢谢！

import React, { Component } from 'react';
import {IndexLink} from 'react-router';
import Item from '../styles/LinkItem.css';

class LinkItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
      text: this.props.link,
      newText: '',
      editing: false
    };
  }
}
editLink() {
  var newText = prompt('Update your link');
  this.setState({
    newText: newText,
    editing: false
  });
  console.log(this.state.newText);
}
handleClick() {
  const clicks = this.state.clicks;
  this.setState({
    clicks: clicks + 1
  });
  localStorage.setItem(`link-${this.props.link}`, JSON.stringify(clicks));
}
render() {
    return (
      <tr>
        <td>
          <IndexLink onClick={this.handleClick.bind(this)} to={{pathname: 'landing/' + this.props.link}}>{this.props.link}</IndexLink>
        </td>
        <td>{JSON.parse(localStorage.getItem(`link-${this.props.link}`))}</td>
        <td><button className="btn btn-default" onClick={this.editLink.bind(this)}>Edit</button></td>
        <td><button className="btn btn-danger" onClick={this.props.data.deleteLink.bind(null, this.props.index)}>Delete</button></td>
      </tr>
  );
 }
}

export default LinkItem;

Answer 1

this.setState是异步的。对state使用回调（在console.log设置后执行的函数）。这是正确的方法。 setState允许回调。现在它没有打印，因为它打印了newText的旧值，它被设置为构造函数中的空字符串。

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

this.setState({
    newText: newText,
    editing: false
  },function(){
     console.log(this.state.newText);
  });

Answer 2

如果你想在更新状态后检查状态值，你需要在setState callback内提及它，因为setState需要一些时间来改变状态，因为javascript是异步你的{{1甚至在状态发生变化之前就会执行。这就是setState docs提到的内容

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。

使用以下代码

console.log()

在React中编辑文本

2 个答案: