Javascript 想使用reactjs使show具有更多功能吗

最初，如果字符长度大于20，则会显示“显示更多”按钮，单击“显示更多”按钮后，所有文本都将可见。为此，我使用了对象数组。我无法检测特定对象单击以设置状态

    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>
        )
      }
    }

---

你可以试试下面的逻辑

在每篇文章中添加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方法中添加以下逻辑

注意：在构造函数中绑定showMore方法。 如this.showMore=this.showMore.bindthis，否则将引用事件对象

并在渲染中使用以下代码

  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>
    );
  }

现场演示

---

你试过什么？有什么例子吗？有密码吗？您的代码无法编译，id未定义。请提供一个有效的例子。使用箭头功能。我认为它的bind-issueMax长度应该来自后端，或者应该定义为一个常量，可以用于所有帖子。仅仅为了添加max length和它不必要的内容而迭代所有帖子是没有意义的

  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>
    );
  }

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>
    );
  }
}