Question

尝试学习React。在我的示例应用程序中，其他组件需要知道文档（textarea的内容）是否未保存。

我尝试的一种方法是让我的父组件注入一个可由孩子＆＃34;编辑器调用的道具＆＃34;成分

除了从textarea调用handleChange时，this.props不再引用编辑器。我确定this践踏，但不确定是否按照推荐的方法解决问题。

export default class Editor extends React.Component {

    constructor(props) {
        super(props);
        console.log(this.props);
    }

    handleChange(event) {
        console.log(this.props);
        // this.props.setUnsaved(true);
    }

    render() {
        return <textarea onChange={this.handleChange} />;
    }
};

如果有更好的方法来分享＆＃34;未保存的＆＃34;国家，我向他们敞开心扉。最终我需要一个更好的模型系统，并可能使用Backbone。

Answer 1

当您使用ES6类版本的React类（而不是使用React.createClass）时，函数不会自动绑定（请参阅React文档中的No Autobinding）。因此，您需要手动绑定该函数，可能使用：

render() {
    return <textarea onChange={this.handleChange.bind(this)} />;
}

如果您不想在每次使用时都绑定该函数，也可以在初始化类时手动绑定函数：

constructor(props) {
    ...
    this.handleChange = this.handleChange.bind(this);
}

或者，如果您使用支持ES7 property initializers的转换器（如Babel，并设置了es7.classProperties配置选项），则可以使用箭头定义要绑定的函数功能属性：

class Editor extends React.Component {
    ...
    handleChange = (event) => {
        ...
    }
}

this.prop trampling in textarea change handler

1 个答案: