在我的反应组件中实现编辑功能的最佳方法

Posted 2023-02-18

【中文标题】在我的反应组件中实现编辑功能的最佳方法

【英文标题】：Best way to implement edit functionality in my react component

【发布时间】：2021-10-22 19:00:59

【问题描述】：

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

ReviewResponseBox 确定应用应该呈现当前的 ReviewResponse 还是 ReviewResponseForm，并传递必要的 props。

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;

【参考方案1】：

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

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;

【讨论】：

您好，感谢您的回复。我仍然遇到问题，当我单击“编辑”时，表单不会呈现

你不应该把组件放在状态中，我写的第二个 sn-p 放在你的 return 语句中。如果您只想显示表单，您可以使用三元运算符，例如： isFormOpen ?

谢谢！出于某种原因，我仍然收到一条错误消息，指出状态的 FormOpen 元素未定义。