Question

我是React.js的新手，似乎无法让任何事件处理程序工作。每当我在render函数之外创建一个事件处理程序而不是一个匿名的内部类时，我都会得到上面引用的错误。有人可以指出我做错了吗？

class Checkboxes extends Component{
constructor(props) {
    super(props);
    this.state = { checked: [true, true],
                    frame: [values, values],
                    title: ['A', 'B'] };

    this.handleChange= this.handleChange.bind(this);
    }

handleChange(e) {
    let index= e.target.id;
    let newState = this.state.checked.slice();
    newState[index] = !this.state.checked[index];
    this.setState ({checked: newState});
}


render(){

    const selectionBoxes = this.state.title.map(function(title, index) {
        return (
            <div className="w3-checkbox" id={index} onClick={this.handleChange}> 
        <input
            type="checkbox"
            label={'Division '+title}
            value={this.state.checked[index]}
            checked={!this.state.checked[index]}
            onChange= {this.handleChange}
            id={index} />
        <label id={index} onClick={this.handleChange}> 
            {'Division '+ title}
        </label>
    </div>
                );
    });

    const frameDisplay = this.state.frame.map(function(frame, index) {
        return (
                <div>
                {this.state.checked[index]} ? null : 
                <DivFrame frameId={frame} width={this.state.width} height={this.state.height} title={this.state.title[index]} />
                </div>
                );
    });

    return (
            {selectionBoxes}
            );
 }
};

export default Checkboxes;

Answer 1

似乎即使您在构造函数中绑定了handleChange到this，它仍然不在this.state.title.map(function(title, index) {...函数范围内。我只需将this.state.title.map(function(title, index) {...更改为this.state.title.map((title, index) => {...

即可解决此问题

这是ES6语法，并自动为我做绑定。

在这里查看演示：https://codesandbox.io/s/py2zp8z1kj

请注意，为了简单起见，我删除了与框架组件有关的代码，因为它与问题没有关系，并且减少了必须实现该组件所需的工作。要使事件处理程序也在该组件上工作，尽管您还必须将映射函数的回调更改为ES6语法。

此外，您会注意到在return方法的render()中，我删除了大括号因为您不需要它们，因为selectionBoxes是原始html并且不需要被评估。实际上对它进行评估（{ selectionBoxes}）会将selectionBoxes的值转换为不是有效反应子对象的对象。所以请将selectionBoxes放在渲染块中。

如果您无法查看演示，则代码如下所示：

 class Checkboxes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: [true, true],
      frame: [0, 1],
      title: ['A', 'B']
    };
  }

  handleChange(e) {
    let index = e.target.id;
    let newState = this.state.checked.slice();
    newState[index] = !this.state.checked[index];
    this.setState({ checked: newState });
  }


  render() {

    const selectionBoxes = this.state.title.map( (title, index) => {
      return (
        <div className="w3-checkbox" id={index} onClick={this.handleChange}>
          <input
            type="checkbox"
            label={'Division ' + title}
            value={this.state.checked[index]}
            checked={!this.state.checked[index]}
            onChange={this.handleChange}
            id={index} />
          <label id={index} onClick={this.handleChange}>
            {'Division ' + title}
          </label>
        </div>
      );
    });

    return (
     selectionBoxes
    );
  }
};

export default Checkboxes;

React：TypeError：无法获取属性＆＃39; handler＆＃39;未定义或空引用

1 个答案: