Question

我有很多从父组件动态生成的文本框，我想在其onChange事件中添加一个函数：

const listElements = this.state.controlsToAdd
.map( function(field, index) {
    return (<Control ref={"option" + (index + 1)} key={index + 1} type={field.ControlType} label={field.ControlLabel} localChange={this.handleOptionChange(this, index)} />)
})

我一直收到错误

未捕获的TypeError：无法读取属性＆＃39; handleOptionChange＆＃39;未定义的

这是函数本身：

handleOptionChange(e, idx) {
var opts = this.state.opts;
opts[idx]={key: idx, name:e.target.value}; 
this.setState({opts: opts});

}

我想要做的是每当在其中一个输入框中键入值以将值插入状态数组时

我将我的函数绑定在构造函数中，如下所示：

this.handleOptionChange = this.handleOptionChange.bind（this）;

修改过的jsfiddle代码：

     class Main extends React.Component {
    constructor(props) {
       super(props);
       this.state = {value: [1,2,3,4], item: ''};
       this.handleOptionChange = this.handleOptionChange.bind(this);
  } 
  handleOptionChange(opt){
     console.log(opt);
     this.setState({opt: opt});
  }
 render() {
    return <div>
       Clicked Item: {this.state.item}
    {
       this.state.value.map((i,j)=>{return <input key={j} onChange=   {this.handleOptionChange.bind(this,i)} value={this.state.value[i-1]}/>})
     }
     *Click on any item
    </div> ;
    }
}

Answer 1

binding问题，map内部使用callback方法，因此您必须使用context .bind(this)来维护callback 1}}方法，或者您可以使用arrow function，它会为您完成这项工作，您可以像这样使用arrow function：

const listElements = this.state.controlsToAdd
.map((field, index)=>{
    return (<Control ref={"option" + (index + 1)} key={index + 1} type={field.ControlType} label={field.ControlLabel} localChange={this.handleOptionChange.bind(this, index)} />)
})

或者使用这样的回调方法：

const listElements = this.state.controlsToAdd
    .map(function(field, index){
        return (<Control ref={"option" + (index + 1)} key={index + 1} type={field.ControlType} label={field.ControlLabel} localChange={this.handleOptionChange.bind(this, index)} />)
    }.bind(this))

查看jsfiddle上的工作示例：https://jsfiddle.net/3erwnxfk/

未捕获的TypeError：无法读取属性＆＃39; handleOptionChange＆＃39;未定义的

1 个答案: