Question

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将显示为未定义。不确定上面有什么问题。

Answer 1

需要在类中定义

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也是如此。

Answer 2

我不完全确定代码示例顶部发生了什么。我正在阅读它，因为方法getMeSomething是在类xyz之外定义的。因此，对于此关键字所指向的类xyz，它将是未定义的。如果我读错了，请注释或编辑代码示例。解决方案是在类中移动它，或者不使用this关键字引用它。

class xyz extends React.Component {
    constructor(props) {
        super(props);
    }
    // Move here
    getMeSomething(abc, xyz, event){}

    render() {
        return (
            <div style={{ ...}}>
                    {
                        // Value of this is the class xyz
                    this.props.cars.map((car) => {
                        // Lambda functions keeps value of this as same as outer scope, so still class xyz.
                        return <div><span className="yhn"><label><input type="checkbox" onChange={this.getMeSomething(this, this.props.color, car)} /><span></span></label>{car}</span></div>
                        })
                    }
            </div>
        );
    }
}

编辑：好的，这是一个重构的解决方案，可以避免使用bind并简化渲染模板逻辑。它似乎在这个JSFiddle中工作。

class CarsComponent extends React.Component {

    getMeSomething(car, isChecked) {
        console.log(isChecked); // True or False
        console.log(car); // Car that was clicked - ex: 'Honda' 
        console.log(this.props.colors); // [ 'blue', 'green', 'yellow' ]
    }

    renderCars(car) {
        return this.props.cars.map((car, i) => {
            return (
                <div key={i}>
                    <span className="yhn">
                        <label>
                            <input type="checkbox" onChange={(e) => this.getMeSomething(car, e.target.checked)} />
                            <span>
                            </span>
                        </label>
                        {car}
                    </span>
                </div>
            )
        });
    }

    render() {
        return (
            <div>
                { this.renderCars() }
            </div>
        );
    }
}

// Test prop variables, you will car your own notion of what these are.
const cars = [ 'Honda', 'Toyota' ];
const colors = [ 'blue', 'green', 'yellow' ];

ReactDOM.render(
    <CarsComponent cars={cars} colors={colors}/>,
    document.getElementById('container')
);

方法/函数undefined在映射中的反应js

2 个答案: