Question

当我按一个按钮时，该按钮应该按一条消息（str），但它不起作用。它显示[object Object]

这是我的简单代码：

class Body extends Component {
    constructor(props){
        super(props)
        this.state = {
            news: ["chao","chao"]
        }
        this.pushNews = this.pushNews.bind(this)
}

pushNews(content){

    this.setState({news: [...this.state.news, content]})

}

....

render(
 {return (
  <Button size="small" onClick={this.pushNews.bind("message")}>AddNews!    </Button>

{this.state.news.map((item, i) =>(
                            <div key={i}>{item.toString()}</div>
)
}
)

我得到：[object Object]

我应该看到输入的“消息”正在渲染：(

Answer 1

您不需要在函数上调用bind来发送数据，并且render功能的格式不正确：

render(){
    return(
        <div>
            <Button size = "small" onClick = {() => this.pushNews("message")} > AddNews!</Button>
            {this.state.news.map((item, i) => <div key={i}>{item.toString()}</div>)}
        </div>
    )
}

组件的render函数应始终返回单个父节点（或片段）。我添加了div作为元素的父元素。

使用最新JS标准的替代方法是将您的函数转换为箭头函数：

pushNews = content => event => {

还有一个更简单的onClick：onClick = {this.pushNews("message")}

这将具有完全相同的结果，并允许您删除构造函数中的绑定

Answer 2

将onClick调用更改为以下内容：

onClick={() => this.pushNews("message")}

呈现状态，该状态是字符串数组。推送后，让我得到[object Object]

2 个答案: