范围问题反应父子方法ES6 [重复]答案

【问题标题】：Scoping issue react parent-child method ES6 [duplicate]范围问题反应父子方法ES6 [重复]
【发布时间】：2015-12-30 04:17:59
【问题描述】：

我目前有点坚持以下内容。

function Tag(props){
    let {text, onRemove, key} = props;
    return (
        <span onClick={onRemove(key)} key={key}>{text}</span>
    )
}

function TagInput (props) {
    let {onChange, value, onKeyDown} = props;
    return (
        <input type="text" onChange={onChange} value={value} onKeyDown={onKeyDown} />
    )
}

class TagsInput extends Component {
    render() {
        let { Tag, TagInput, state } = this.props;
        console.log(state.tags);
        return (
            <div ref="div" onClick={(e) => this.handleClick(e)}>
                {state.tags.map((tag) =>
                    <Tag
                        text={tag.text}
                        key={tag.id}
                        onRemove={this.handleRemove}
                    />
                )}
                <TagInput
                    onChange={(e) => this.handleChange(e)}
                    onKeyDown={(e) => this.handleKeyDown(e)}
                />
            </div>
        )
    }

    handleClick(e) {
        console.log(e.target.value);
    }

    handleChange(e){
        //console.log(e.target.value);
    }

    handleKeyDown(e){
        //console.log('keycode', e.keyCode);
        const { dispatch } = this.props;
        if (e.keyCode === 32) {
            dispatch(addTag(e.target.value));
        }
        if (e.keyCode === 8 && e.target.value.length === 0) {
            dispatch(removeTag());
        }
    }

    handleRemove(id){
        const { dispatch } = this.props;
        dispatch(removeTag(id));
    }
}

TagsInput.propTypes = {
    TagInput: React.PropTypes.func,
    Tag: React.PropTypes.func,
    removeKeyCodes: React.PropTypes.array,
    addKeyCodes: React.PropTypes.array
};

TagsInput.defaultProps = {
    TagInput: TagInput,
    Tag: Tag,
    removeKeyCodes: [8],
    addKeyCodes: [9, 13]
};

我在控制台Uncaught TypeError: Cannot read property 'props' of undefined 中从方法handleRemove 行const { dispatch } = this.props 收到以下错误。这似乎是一个范围界定问题，但我似乎无法理解为什么会发生这种情况（不是双关语，哈哈）。

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

ES6 类不会自动将 this 绑定到函数，但通过扩展 Component 提供的函数除外，例如 componentDidMount 等。

from the docs

ES6 方式 - 将 this 绑定到构造函数中的方法，或者调用它们的位置：

class TagsInput extends Component {
  constructor (props) {
    super(props)
    this.handleRremove = this.handleRemove.bind(this)
  }

  OR

  render() {
    return (
     <Tag   
       onRemove={this.handleRemove.bind(this)}
     />
  }

ES7 方式 #1：绑定语法

this.handleRemove = ::this.handleRemove

ES7方式#2：类箭头函数（我认为这是最好的方式）：

handleRemove = (id) => {
    const { dispatch } = this.props;
    dispatch(removeTag(id));
}

然后这样称呼它：

onRemove={ () => this.handleRemove(tag.id) }

更新：也阅读@Road 的回答。当在使用点绑定方法时，你需要传递参数。

【讨论】：

【解决方案2】：

你试过绑定this吗？试试this.handleRemove.bind(this, tag.id)。 tag.id 是您传递的参数，因为 handleRemove(id) 需要 id 作为参数。

【讨论】：