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

<!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的方法根据{{3}}你应该这样做：

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

你会像以后一样接受它：

this.myInput

以下是您的代码的运行示例：

＆＃13;

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"));

＆＃13;

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

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

＆＃13;

React：refs抛出错误 - ＆＃39; Uncaught Error：Invariant Violation＆＃39;

2 个答案: