Question

想象一下有博文的页面。在帖子的底部有一个按钮＆＃39;编辑帖子＆＃39;链接到页面/ posts /：postId / edit。单击该按钮，您可以在表单中查看博客文章详细信息。一切都很好。但是，如果刷新页面，则输入字段将变为空。

这是博文中的编辑按钮：

<button onClick={event => 
this.props.history.push(`/posts/edit/${post.id}`)}>Edit post</button>

使用URL中的：postId获取帖子详细信息，这表明无论是从按钮访问页面还是手动键入URL都不会有任何区别。

这是我获取帖子详细信息的方式：

componentWillMount() {
  this.props.fetchPost(this.props.match.params.postId)
}

这就是我填写表格的方式：

<input type="text" id="title" name="title" size="35" defaultValue={post.title} />

另一个有趣的事情。如果我只是在页面某处的{post.title}元素中显示<p>，则在页面刷新后仍会显示。

现在，如果始终使用URL中的：postId请求发布详细信息，为什么在页面刷新（或手动键入的URL）后编辑表单会变空？

Screenshot

P.S。我正在使用Redux

Answer 1

添加了州：

constructor(props) {
    super(props);
    this.handleTitleChange = this.handleTitleChange.bind(this);
    this.handleContentChange = this.handleContentChange.bind(this);
    this.state = {
      body: '',
      title: ''
    }
  }

获取与以前相同的帖子：

  componentWillMount() {
    this.props.fetchPost(this.props.match.params.postId)
  }

添加了componentWillReceiveProps函数：

  componentWillReceiveProps(data) {
    this.setState({ title: data.post.title });
    this.setState({ body: data.post.body });
  }

为输入字段添加了onChange处理程序：

  handleTitleChange(event) {
    this.setState({ title: event.target.value });
  }

  handleContentChange(event) {
    this.setState({ body: event.target.value });
  }

最后输入字段：

<form onSubmit={this.submitPost}>
 <label htmlFor="title">Title</label>
 <input type="text" id="title" onChange={this.handleTitleChange} name="title" size="35" value={this.state.title} />
 <label htmlFor="content">Content</label>
 <p>{ post.body }</p>
 <textarea type="text" id="body" name="body" onChange={this.handleContentChange} rows="4" cols="60" value={this.state.body} />
 <button type="submit">Update post</button>
</form>

现在似乎正常工作。

刷新

1 个答案: