Question

最初，如果字符长度超过20，则将显示“显示更多”按钮，并且单击“显示更多”按钮时，所有文本都将可见。为此，我正在使用对象数组。我无法检测到单击setState的特定对象。

    class App extends React.Component {
      state = {
        posts: [],
        maxLength: 20
      }

      componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/posts')
          .then(response => response.json())
          .then(json => this.setState({
            posts: json
          }))
      }

      showMore(item) {
        if (item.id == this.state.posts[id - 1].id) {
          this.setState({
            maxLength: item.body.length
        })
       }
      }

      render() {

        return (
          <div>
            {
              this.state.posts.map((item) => {
                return (
                  <div style={{ padding: '10px', border: '1px solid', marginBottom: '10px' }} key={item.id}>
                    <p>{item.id}</p>
                    <p>{item.body.length > this.state.maxLength ? item.body.slice(0, this.state.maxLength) : item.body }</p>
                    {
                      item.body.length > 20 ?
                        <button onClick={() => this.showMore(item)}>ShowMore</button>
                        : null
                    }
                  </div>
                )
              })
            }
          </div>
        )
      }
    }

Answer 1

您可以尝试以下逻辑。

在每个帖子中添加一个maxLength属性，并将其设置为初始长度。

componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(json => {
       //Add the new length property
        let posts = json.map(item => {
          return {
            ...item,
            maxLength: 20
          };
        });

        this.setState({
          posts
        });
      });
  }

然后在showMore方法中添加以下逻辑。

注意：bind构造函数中的showMore方法。例如this.showMore = this.showMore.bind(this)，否则this将引用事件对象。

showMore(index) {
    this.setState(prevStat => {
      let posts = [...prevStat.posts];
      if (posts[index].maxLength === posts[index].body.length) {
        posts[index].maxLength = 20;
      } else {
        posts[index].maxLength = posts[index].body.length;
      }

      return {
        posts: posts
      };
    });
  }

然后在render中使用以下代码。

  render() {
    return (
      <div>
        {this.state.posts.map((item, index) => {
          return (
            <div
              style={{
                padding: "10px",
                border: "1px solid",
                marginBottom: "10px"
              }}
              key={item.id}
            >
              <p>{item.id}</p>
              <p>
                {item.body.length > item.maxLength
                  ? item.body.slice(0, item.maxLength)
                  : item.body}
              </p>
              {item.body.length > 20 ? (
                <button onClick={() => this.showMore(index)}>
                  {" "}
                  {item.body.length > item.maxLength ? "Show More" : "Show Less"}
                </button>
              ) : null}
            </div>
          );
        })}
      </div>
    );
  }

实时演示

Answer 2

class App extends React.Component {
  state = {
    posts: [],
    maxLength: 20,
    disableTruncate: [],
  };

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json =>
        this.setState({
          posts: json,
        }),
      );
  }

  showMore(itemId) {
    this.setState({
      disableTruncate: [...this.state.disableTruncate, itemId],
    });
  }

  showLess(itemId) {
    const filterTruncatedEle = this.state.disableTruncate.filter(truncatedId => itemId !== truncatedId)
    this.setState({
      disableTruncate: filterTruncatedEle,
    });
  }

  render() {
    const { posts, disableTruncate, maxLength } = this.state;
    return (
      <div>
        {posts.map(({ id, body }) => {
          const ele = disableTruncate.find(truncatedId => truncatedId === id);
          const filteredBody = ele ? body : body.slice(0, maxLength);
          return (
            <div
              style={{
                padding: '10px',
                border: '1px solid',
                marginBottom: '10px',
              }}
              key={id}
            >
              <p>{id}</p>
              <p>{filteredBody}</p>
              {filteredBody.length === maxLength ? (
                <button onClick={() => this.showMore(id)}>ShowMore</button>
              ) : <button onClick={() => this.showLess(id)}>ShowLess</button>}
            </div>
          );
        })}
      </div>
    );
  }
}

想要使用reactjs显示更多功能

2 个答案: