Question

如果不使用this.say绑定到此按钮，则示例不起作用。但是我不确定它是否正确或有任何副作用。

＆＃13;

class Speak extends React.Component {

    render() {
        return (
            <div>
                <input ref={(c) => this._input = c} defaultValue="Hello World!"/>
                <button onClick={this.say.bind(this) }>Say</button>
            </div>
        );
    }

    say() {
        if (this._input !== null) {
            alert(this._input.value);
        }
    }
};

ReactDOM.render(<Speak />, document.getElementById('App'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="App" />

＆＃13;

Answer 1

使用ES6课程时似乎需要这样：See: Autobinding

唯一不同的是上面的示例绑定构造函数中的方法

Answer 2

您可以使用数组函数而忘记添加.bind(this)
检查工作this one

class Speak extends React.Component {
    render() {
        return (
            <div>
                <input type='text' ref='greeting'/>
                <button onClick={this.say}>Say</button>
            </div>
        );
    }

    say = () => {
        const { value } = this.refs.greeting;
        alert(value);
        return value;
    };
};

ReactDOM.render(<Speak />, document.getElementById('App'));

访问ref的正确方法是反应吗？

2 个答案: