反应：裁判抛出错误 - '未捕获的错误：不变违规'答案

【问题标题】：React: refs throwing an error - 'Uncaught Error: Invariant Violation'反应：裁判抛出错误 - '未捕获的错误：不变违规'
【发布时间】：2017-10-17 04:32:57
【问题描述】：

我试图在单击添加新按钮时模糊日历控件，但它会引发错误。如果有人知道解决方案，请回答，实际上 ref 是造成问题的原因：Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../react.js"></script>
    <script src="../react-dom.js"></script>
    <script src="../react-with-addons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <style>
        .cmnt
        {
            height: 300px;
            width: 300px;
            background: lavender;
        }
    </style>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel"> 
        var totalCandidates = {'A':'23/10/2017','B':'24/10/2017','C':'23/10/2017'};       
        class MyComponent extends React.Component {

            constructor(props) {
                super(props);
                this.state = {
                    showComponent: false,                    
                };               
            }
            _onButtonClick() {
                console.log(totalCandidates);
                this.setState({
                    showComponent: true,
                });
            }
            _onCalenderChange() {
                console.log(this);
                this.refs.calender.blur();
            }
            render() {
                return (
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>Candidate's name</th>
                                    <th>
                                        <input type="text" name="" id="" />
                                    </th>
                                    <th>
                                        Scheduled interview list
                                    </th>
                                    <th>
                                        <input type="date" name="" id="" ref='calender' onChange={this._onCalenderChange.bind(this)} />
                                    </th>
                                    <th>
                                        <select name="" id=""></select>    
                                    </th>    
                                </tr>
                            </thead>                               
                        </table>
                        <button onClick={this._onButtonClick.bind(this)}>Add new</button>
                        {this.state.showComponent ? <MyComponent /> : null  }
                    </div>
                );
            }
        }  
        ReactDOM.render(<MyComponent />,document.getElementById("example"));                       
</script>
  </body>
</html>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

更改脚本顺序来自

<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../react-with-addons.js"></script>

订购到

<script src="./lib/react.js"></script>
<script src="./lib/react-with-addons.js"></script>
<script src="./lib/react-dom.js"></script>

【讨论】：

【解决方案2】：

这不是附加ref 的方法。
根据DOCS，您应该这样做：

<input ref => {this.myInput = ref} />

你稍后会像这样访问它：

this.myInput

这是您的代码的运行示例：

var totalCandidates = {'A':'23/10/2017','B':'24/10/2017','C':'23/10/2017'};       
        class MyComponent extends React.Component {

            constructor(props) {
                super(props);
                this.state = {
                    showComponent: false,                    
                };               
            }
            _onButtonClick() {
                console.log(totalCandidates);
                this.setState({
                    showComponent: true,
                });
            }
            _onCalenderChange = () => {
                console.log(this.calendar);
                this.calendar.blur();
            }
            render() {
                return (
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>Candidate's name</th>
                                    <th>
                                        <input type="text" name="" id="" />
                                    </th>
                                    <th>
                                        Scheduled interview list
                                    </th>
                                    <th>
                                        <input type="date" name="" id="" ref={ref => {this.calendar = ref}} onChange={this._onCalenderChange.bind(this)} />
                                    </th>
                                    <th>
                                        <select name="" id=""></select>    
                                    </th>    
                                </tr>
                            </thead>                               
                        </table>
                        <button onClick={this._onButtonClick.bind(this)}>Add new</button>
                        {this.state.showComponent ? <MyComponent /> : null  }
                    </div>
                );
            }
        }  
ReactDOM.render(<MyComponent />,document.getElementById("example"));

.cmnt {
  height: 300px;
  width: 300px;
  background: lavender;
}

<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="example"></div>

【讨论】：