javascript - 在React JS中内部未定义方法/函数

contructor:
this.getMeSomething = this.getMeSomething.bind(this)//////


getMeSomething(abc, xyz, event){}


class xyz extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div style={{ ...}}>
                    {
                    this.props.cars.map((car) => {
                        return <div><span className="yhn"><label><input type="checkbox" onChange={this.getMeSomething(this, this.props.color, car)} /><span></span></label>{car}</span></div>
                        })
                    }
            </div>
        );
    }
}

错误于

<div><span className="yhn"><label><input type="checkbox" onChange={this.getMeSomething(this, this.props.color, car)} /><span></span></label>{car}</span></div>

执行。

这显示为窗口，而getMeSomething也未定义。不知道上面有什么问题。

最佳答案

需要在类内部定义getMeSomething以便将其与this一起使用。

    class xyz extends React.Component {
  constructor(props) {
      super(props);
      this.getMeSomething = this.getMeSomething.bind(this)
  }

  getMeSomething(event){}

  render() {
    return (
      <div style={{ ...}}>
            {
            this.props.cars.map((car) => {
              return (
                <div>
                  <span className="yhn">
                    <label><input type="checkbox" onChange={this.getMeSomething} />
                    </label>
                    {car}
                  </span>
                </div>
                )
              })
            }
      </div>
    );
  }
}

如果希望getMeSomething在类之外，则另一种方法是将其作为props传递。避免将其附加到全局window对象。

this在getMeSomething中也隐式可用，因此props也是如此。