Reactjs 在这种情况下，将“this.setState”放在何处？

我正在尝试制作一个页面，您可以在其中单击缩略图，并使用state获得要显示的放大版本。使状态正常工作，但在尝试在缩略图上的onClick中设置未定义的属性“setState”时，收到错误消息无法读取该属性。我能理解为什么它不能像这样工作，但我很难准确地理解如何安排事情让它按照我的意愿工作。下面是有问题的代码：

const WorkThumb = ({work}) => (
  <Col xs={3} md={4}>
    <WorkImage src={work.metadata.image.imgix_url} onClick={this.setState({selected: work._id})} />
  </Col>
)

export default class ArtContent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {selected: props.works[0]["_id"]};
  }

  render () {
    return (
      <Row>
        <Col xs={6}>
          <Row between="xs" center="xs" middle="xs">
            {this.props.works.map((work) => (
              <WorkThumb key={work._id} work={work} />
            ))}
          </Row>
        </Col>
        <Col xs={6}>
          <Selected src={this.props.works.filter((work) => (work["_id"] == this.state.selected))[0].metadata.image.imgix_url} />
        </Col>
      </Row>
    )
  }
}

感谢您的帮助。

您不能在应为纯函数的无状态组件上调用setState，即仅依赖其参数：无此上下文、无状态、相同输入-相同输出。但您可以从其有状态父级传递回调

const WorkThumb = ({work, onSelect}) => (
  <Col xs={3} md={4}>
    <WorkImage src={work.metadata.image.imgix_url} onClick={() => onSelect(work)} />
  </Col>
)

export default class ArtContent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {selected: props.works[0]["_id"]};
    this.selectWork = this.selectWork.bind(this)
  }

  selectWork(work) {
    this.setState(...)
  } 

  render () {
    return (
      <Row>
        <Col xs={6}>
          <Row between="xs" center="xs" middle="xs">
            {this.props.works.map((work) => (
              <WorkThumb key={work._id} work={work} onSelect={this.selectWork} />
            ))}
          </Row>
        </Col>
        <Col xs={6}>
          <Selected src={this.props.works.filter((work) => (work["_id"] == this.state.selected))[0].metadata.image.imgix_url} />
        </Col>
      </Row>
    )
  }
}

---

是的，那正是我想要的，谢谢！