1

我一直在开发一个评论反应应用程序一段时间了，我遇到了一个问题。评论可以有评论回复，但每条评论只能有一个评论回复。我实现了功能，以便一旦评论有回复，回复表单就不会出现。但是，我需要实现一种可以编辑响应的方法。我考虑通过向 ReviewResponse 添加一个“编辑”按钮，并向呈现 ReviewResponseForm 组件的该按钮添加一个“onClick”功能来解决这个问题。但是，此功能不起作用。有人对我应该如何实施这个有任何建议吗？谢谢

ReviewResponseBox 确定应用程序是否应该呈现当前的 ReviewResponse 或 ReviewResponseForm，并传递必要的道具。

import React from "react";
import ReviewResponse from "./ReviewResponse";
import ReviewResponseForm from "./ReviewResponseForm";

class ReviewResponseBox extends React.Component {
  state = {
    reviewResponses: JSON.parse(localStorage.getItem(`reviewResponses-${this.props.review_id}`)) || []
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.reviewResponses !== this.state.reviewResponses) {
      localStorage.setItem(
        `reviewResponses-${this.props.review_id}`,
        JSON.stringify(this.state.reviewResponses)
      );
    }
  }

  render() {
    const reviewResponses = this.getResponses();
    const reviewResponseNodes = (
      <div className="reviewResponse-list">{reviewResponses}</div>
    );

    return (
      <div className="reviewResponse-box">
        {reviewResponses.length ? (
          <>{reviewResponseNodes}</>
        ) : (
          <ReviewResponseForm addResponse={this.addResponse.bind(this)} />
        )}
      </div>
    );
  }

  addResponse(review_id, author, body) {
    const reviewResponse = {
      review_id,
      author,
      body
    };
    this.setState({
      reviewResponses: this.state.reviewResponses.concat([reviewResponse])
    }); // *new array references help React stay fast, so concat works better than push here.
  }

  
  getResponses() {
    return this.state.reviewResponses.map((reviewResponse) => {
      return (
        <ReviewResponse
          author={reviewResponse.author}
          body={reviewResponse.body}
          review_id={this.state.review_id}
        />
      );
    });
  }
}
export default ReviewResponseBox;

现在 ReviewResponseForm 仅在没有现有 ReviewResponse 时呈现。但是使用编辑功能，如果单击我的 ReviewResponse 组件上的编辑按钮，我正在考虑渲染它

import React from "react";

class ReviewResponseForm extends React.Component {
  render() {
    return (
      <form className="response-form" onSubmit={this.handleSubmit.bind(this)}>
        <div className="response-form-fields">
          <input placeholder="Name" required ref={(input) => this.author = input}></input><br />
          <textarea placeholder="Response" rows="4" required ref={(textarea) => this.body = textarea}></textarea>
        </div>
        <div className="response-form-actions">
          <button type="submit">Post Response</button>
        </div>
      </form>
    );
  }
  
  handleSubmit(event) { 
    event.preventDefault();   // prevents page from reloading on submit
    let review_id = this.review_id
    let author = this.author;
    let body = this.body;
    this.props.addResponse(review_id, author.value, body.value);
  }
} 

export default ReviewResponseForm;

ReviewResponse.js

import React from 'react';
import './ReviewResponse.css';
import ReviewResponseForm from "./ReviewResponseForm";

class ReviewResponse extends React.Component {

  handleClick() {
   return <ReviewResponseForm />
    }

    render () {
      return(
        <div className="response">
          <i class="reply icon" style={{ color: 'blue'}}></i>
          <br></br>
          <p className="response-header">{this.props.body}</p>
          <p className="response-body">- {this.props.author}</p>
          <div className="response-footer" >
          <button onClick={() => this.handleClick()}>Edit</button>
            </div>
        </div>
      );
    }
  
  }
  export default ReviewResponse;

任何建议都会有帮助谢谢

编辑#1 大家好，我将组件更改为在单击按钮时重新呈现，以便状态可以更改并且可以呈现表单，但它仍然没有显示出来。任何建议都会有所帮助，谢谢（我实际上将我的 handleClick 事件处理程序放在省略号图标上）

import React from 'react';
import './ReviewResponse.css';
 import ReviewResponseForm from "./ReviewResponseForm";

class ReviewResponse extends React.Component {
  state = {
    formOpen: false
  };
 
 handleClick() {
    this.setState({formOpen: true && <ReviewResponseForm />})
    console.log('click')
    }

    render () {
      return(
        <div className="response">
          <span class="ellipsis">
           <i class="ellipsis horizontal icon" onClick={() => this.handleClick()} style={{ color: 'blue' }}></i>
           </span>
           <br></br>
           <span class="reply-icon">
          <i class="reply icon" style={{ color: 'blue'}}></i>
          </span>
         <span class="response-content">
          <p className="response-body">{this.props.body}</p>
          <p className="response-author"> {this.props.author}</p> 
          <p className="response-date">{new Date().toISOString().split("T")[0].replaceAll("-", "/")}</p> 
          <div className="response-footer">
          </div>
          </span>
            </div>  
            
      );
    }
   
  }
  export default ReviewResponse;
4

1 回答 1

0

我猜它不起作用，因为您没有触发重新渲染。您应该考虑在状态中使用布尔值。

state = {
  isFormOpen: false
};

然后，当您单击编辑按钮时，您应该将 isFormOpen 设置为 true。表单有条件地呈现如下：

isFormOpen && <Form />

请注意，状态的更改会强制组件重新启动其生命周期。

我编辑了你的代码：

import React from 'react';
import './ReviewResponse.css';
import ReviewResponseForm from "./ReviewResponseForm";

class ReviewResponse extends React.Component {
  state = {
    formOpen: false
   };

  handleClick() {
    this.setState({formOpen: true})
    console.log('click')
  }

  render () {
    return formOpen ? (<ReviewResponseForm />) : (
      <div className="response">
        <i class="reply icon" style={{ color: 'blue'}}></i>
        <br></br>
        <p className="response-header">{this.props.body}</p>
        <p className="response-body">- {this.props.author}</p>
        <div className="response-footer" >
          <button onClick={() => this.handleClick()}>Edit</button>
        </div>
     </div> 
    )
  }
} 
export default ReviewResponse;
于 2021-08-22T07:26:03.967 回答