Question

所以我花了最近几周学习反应，现在我正在尝试使用firebase。

现在，我正在尝试编辑和删除博文。在过去的几周里我用express，rails等做了一些相似的事情，所以我觉得我有一个非常好的处理，所以现在我想比较并知道它们之间的差异。

大多数功能都很容易被重构，以便与我现在正在做的事情一起工作，所以我不确定如何调整这个功能在这里工作，或者它是否根本无法工作，然后转向如何我在这里做得好吗。

我上次尝试编辑的原始代码是：

    getInitialState(){
    return {editable: false} 

},
    handleEdit(){
        if( this.state.editable){
            var title = this.refs.title.value;
            var article= this.refs.article.value;
            var id = this.props.post.id;
            var post = {id: id, title: title, article: article};
            this.props.handleUpdate(post);
         } 
        this.setState({editable: !this.state.editable})
},

render: function(){
    var title= this.state.editable? <input className= "form-control" type='text' ref='title' defaultValue={this.props.post.title}/>:
                                    <h3>{this.props.post.title}</h3>;
    var article= this.state.editable ? <input className= "form-control" type='text' ref='article' name="logEntryEdit" defaultValue={this.props.post.article}/>: 
                                        <p className="postText">{this.props.post.article}</p>;

        return(
            <div >
                <div className="text-center postTitle">
                    {title}
                </div>
                <hr/>
                <br/>
                <div className="text-center" id="postText">
                    {article}
                </div>
                <br/>
                <hr/>
                <button className="btn btn-danger delete-button" onClick={this.props.handleDelete}>Delete</button>
                <button className="btn btn-primary" onClick={this.handleEdit}>{this.state.editable ? 'Submit' : 'Edit'}</button>

            </div>
        )

当然我编辑了项目名称等。我如何设置我的编辑页面是首先通过firebase生成的id将所选帖子传递到单个视图页面，然后将其传递到编辑页面。删除也应该来自该视图页面。

这是我试图放入上述功能的编辑：

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

  };
}


  componentDidMount(){
    database.ref(`posts/${this.props.match.params.postId}`) 
    .on('value', snapshot => {
          this.setState({post: snapshot.val()});
    });
    this.postId= this.props.match.params.postId;
}

 //edit function goes here

      render() {
        return (

                <div className="container">
                  <form onSubmit={this.onHandleUpdate}>
                    <div className="form-group">
                  <input value={this.state.post && this.state.post.title} className="form-control" type="text" name="title" ref="title" placeholder="Title" onChange={this.onInputChange}/>
                </div>
                  <br/>
                <div className="form-group">  
                  <input  value={this.state.post && this.state.post.body} className="form-control" type="text" name="body" ref="body" placeholder="Body" onChange={this.onInputChange}/>
                  <br/>
                </div>
                <button  className="btn btn-success">Submit</button>
              </form>
            </div>

        );
      }

当我尝试添加它时，我也得到了一个

组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的生命周期内使用受控或不受控制的输入元素

它将我与我过去的文档联系起来。

你能告诉我如何制作我原本适合的原始代码，以及如何完成它以便我可以比较和理解其中的差异吗？

Answer 1

此错误源于您声明输入字段是通过this.onInputChange函数更新但该功能未在任何位置定义的事实。这意味着没有办法更新输入，反应不喜欢。定义你的this.onInputChange函数或切换到使用refs（当你使用ref反应调用一个不受控制的组件时）。

如何编辑/删除react + firebase上的帖子内容

1 个答案: