Javascript 将事件侦听器状态作为道具传递

在我的React代码中，我使用的是Babel的stage 3类属性，它不需要构造函数来声明状态和事件侦听器。父组件有两种状态：

color

和

listener

。现在的问题是，作为

clickEvent

prop传递的

this.state.listener

不起作用

下面的代码用于在每次单击时将按钮的颜色从白色更改为黑色，反之亦然

const Button = props => {
  const { background, clickEvent } = props;
  const styles = {
    background,
    color: background === '#000' ? '#fff' : '#000'
  };

  return <button style={styles} onClick={clickEvent}>Change color</button>
}



export default class App extends Component {
  state = {
    color: '#fff',
    listener: this.changeColor
  }

  changeColor = () => {
    this.setState(state => ({
      color: state.color === '#000' ? '#fff' : '#000'
    }))
  }

  render() {
    const { color, listener } = this.state;

    return (
      <Button background={color} clickEvent={listener} />
    )
  }
}

const按钮=道具=>{
const{background，clickEvent}=props；
常量样式={
背景,，
颜色：背景=='#000'？'#fff'：'#000'
};
退换颜色
}
导出默认类应用程序扩展组件{
状态={
颜色：“#fff”，
听众：这是变色
}
changeColor=（）=>{
this.setState（state=>({
颜色：state.color=='#000'？'#fff'：'#000'
}))
}
render（）{
const{color，listener}=this.state；
返回(
)
}
}

直接使用该方法，如下所示：

export default class App extends Component {
  state = {
    color: '#fff'
  }

  changeColor = () => {
    this.setState(state => ({
      color: state.color === '#000' ? '#fff' : '#000'
    }))
  }

  render() {
    const { color, listener } = this.state;

    return (
      <Button background={color} clickEvent={this.changeColor} /> //fixed
    )
  }
}

导出默认类应用程序扩展组件{
状态={
颜色：'#fff'
}
changeColor=（）=>{
this.setState（state=>({
颜色：state.color=='#000'？'#fff'：'#000'
}))
}
render（）{
const{color，listener}=this.state；
返回(
//固定的
)
}
}

---

我们不需要将它设置为

状态

属性。

它不起作用的原因是您按错误的顺序做事。首先声明this.state，然后声明this.changeColor，因此在定义this.changeColor之前尝试访问它。因此，如果您想继续将其存储在状态中（我同意其他人的看法，这可能是不必要的），则需要交换他们的顺序：

export default class App extends Component {
  changeColor = () => {
    this.setState(state => ({
      color: state.color === '#000' ? '#fff' : '#000'
    }))
  }

  state = {
    color: '#fff',
    listener: this.changeColor
  }

  render() {
    const { color, listener } = this.state;

    return (
      <Button background={color} clickEvent={listener} />
    )
  }
}

导出默认类应用程序扩展组件{
changeColor=（）=>{
this.setState（state=>({
颜色：state.color=='#000'？'#fff'：'#000'
}))
}
状态={
颜色：“#fff”，
听众：这是变色
}
render（）{
const{color，listener}=this.state；
返回(
)
}
}

您不应该在状态中存储函数，而应该存储变量。您应该将

changeColor

函数传递给子道具，如下所示：

const Button = props => {
  const { background, clickEvent } = props;
  const styles = {
    background,
    color: background === '#000' ? '#fff' : '#000'
  };

  return <button style={styles} onClick={clickEvent}>Change color</button>
}



export default class App extends Component {
  state = {
    color: '#fff',
  }

  changeColor = () => {
    this.setState(state => ({
      color: state.color === '#000' ? '#fff' : '#000'
    }))
  }

  render() {
    const { color } = this.state;

    return (
      <Button background={color} clickEvent={this.changeColor} />
    )
  }
}

const按钮=道具=>{
const{background，clickEvent}=props；
常量样式={
背景,，
颜色：背景=='#000'？'#fff'：'#000'
};
退换颜色
}
导出默认类应用程序扩展组件{
状态={
颜色：“#fff”，
}
changeColor=（）=>{
this.setState（state=>({
颜色：state.color=='#000'？'#fff'：'#000'
}))
}
render（）{
const{color}=this.state；
返回(
)
}
}

不定义侦听器打开状态。只需执行

不，这里的顺序并不重要。我不工作是因为别的原因。是的。代码的传输版本接受这两个类属性，将它们移动到构造函数中，并保持它们的编写顺序。在定义this.changeColor之前引用它将导致this.state.listener

未定义

。你可以在babeljs.io/repl上玩这个。确保包含babel插件转换类属性，我建议使用es2016预设，以便更容易地遵循传输的代码。你是对的，我没有注意到

changeColor

was属性，我在React文档中阅读了一个关于上下文的示例，其中事件侦听器状态作为prop传递给子组件。这就是我试图模仿的，但在第三阶段（没有构造器）。我真的怀疑他们在他们的官方文件中添加了这一点，看起来像是反模式。我也这么认为。谢谢，顺便说一句