javascript - 如何添加事件以响应功能并重新渲染功能

我有一个函数，可以根据API数据填充的状态将内容呈现到页面上，但是我需要有一个onClick事件来优化内容。

因此，当前getPosts从状态“ posts”返回信息，该信息由我们的API提供，但我想进一步过滤此内容，所以我的想法是拥有某种事件侦听器，如果采取措施，则更改输出的数据的getPosts。

constructor() {
    super();
    this.state = {
        posts: ""
    }
    this.getPosts = this.getPosts.bind(this);
}
async componentWillMount(){
    var data = await api.posts();
    this.setState({posts: data.data});
    console.log(this.state.posts);
}
getPosts(type){
        if(this.state.posts.length){
            return this.state.posts.map((content,index) => {
                var url = content.Title.replace(/[^\w\s]/gi, '');
                url = url.replace(/\s+/g, '-').toLowerCase();
                if(type === content.PostType){
                    //output something different
                }
                else{
                    return(
                        <Col md={4} className="mb-4" key={index}>
                            {content.title}
                        </Col>
                    );
                }
            })

        }
    }
    render() {
        return (
            <div>
            <p><button onClick={()=>{this.getPosts('blog')}}>blog</button> <button onClick={()=>{this.getPosts('news')}}>news</button></p>
            {this.getPosts()}
            </div>
        )
    }

因此，我的getPosts可以正常工作而没有任何类型，如何根据onClick事件告诉它重新输出页面上的函数？

最佳答案

在不涉及上下文和键的复杂性的情况下，组件需要更改道具或状态以重新呈现。 To read more about state and component life-cycle, the docs have a great explanation for class components.

在onClick事件处理程序调用getPosts之后，您的组件不会重新呈现，因为getPosts不会更新内部组件状态。 getPosts在渲染器中工作，因为这些值已返回给React。通过使用getPosts作为onClick事件处理程序，您可以创建React元素并尝试将其返回到窗口。

以下内容应视为伪代码，以显示如何触发组件呈现不同的帖子：


考虑在构造函数中添加另一个要声明的键，

constructor(props) {
  super(props);
  this.state = {
    posts: "",
    type: null
  };
  this.getPosts = this.getPosts.bind(this);
  this.onClick = this.onClick.bind(this);
}

并创建一个不会尝试返回React元素的点击处理程序

function onClick(evt) {
  this.setState({ type: evt.target.value });
}

和按钮的值

<button onClick={this.onClick} type="button" value="blog">blog</button>

现在，您的按钮将使用新的帖子类型更新状态，从而导致组件重新呈现：

render() {
  return (
    <div>
      <p>
        <button onClick={this.onClick} type="button" value="blog">blog</button>
        <button onClick={this.onClick} type="button" value="news">news</button>
      </p>
      {this.getPosts()}
    </div>
  );
}

内容类型处于状态存储后，您现在可以使用任何适合您的方式实现getPosts调用。祝好运！

它偏离了提出的问题，但值得注意的是，componentWillMount已被弃用，并且componentDidMount是副作用和异步行为的首选生命周期函数。 Thankfully, the documentation has lots of details!

关于javascript - 如何添加事件以响应功能并重新渲染功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58137797/