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

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>
        );
    }
}

Error at

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

execution.

this is showing as window and getMeSomething is coming as undefined. Not sure what is wrong in the above.

Answer 1

getMeSomething needs to be defined inside the class to use it with 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>
    );
  }
}

If you want getMeSomething to be outside the class, then another way is to pass it as props . Avoid attaching it to the global window object.

Also this is implicitly available within getMeSomething and so are props .

Answer 2

I am not entirely sure what is going on at the top of the code sample. I am reading it as the method getMeSomething is defined outside of the class xyz. Therefore, it would be undefined for class xyz, which the this keyword is pointing to. Comment, or edit the code sample if I am reading it wrong. The solution is to move it within the class, or to not refer to it using the this keyword.

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>
        );
    }
}

EDIT: Okay, here is a refactored solution that avoids having to use bind and simplifies your render template logic. It appears to be working in this 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')
);