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

Question

我正在尝试在单击“添加新按钮”时模糊日历控件，但是它引发了错误。 如果有人知道解决方案，请回答，实际上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 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>

Answer 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>

Answer 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>

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

问题描述

2 个解决方案

解决方案1
0 2017-10-17 05:14:41

解决方案2
0 2017-10-17 05:52:35

反应：裁判抛出错误-&#39;未捕获的错误：不变违反&#39;

问题描述

2 个解决方案

解决方案1 0 2017-10-17 05:14:41

解决方案2 0 2017-10-17 05:52:35

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

解决方案1
0 2017-10-17 05:14:41

解决方案2
0 2017-10-17 05:52:35