Question

我目前对以下内容感到有些困惑。

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中收到以下错误。这似乎是一个范围问题，但我似乎无法理解为什么这个（没有双关语意图lol）正在发生。

Answer 1

您是否尝试过绑定this？试试this.handleRemove.bind(this, tag.id)。由于tag.id需要handleRemove(id)作为arg，id存在您要传递的参数。

Answer 2

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的答案。在使用点绑定方法时，需要传递参数。

范围问题反应父子方法ES6

2 个答案: