findDOMNode монтируемого компонента в ReactJS

Question

У меня есть два файла JS, включенных в страницу в utility.js и utility1.js
Код для utility.js

var HelloWorld = React.createClass({ 
    render: function() { 
    return (
     <p> 
     Hello, <input type="text" ref="mytestinput" placeholder="Your name here" />!<br /> 
     It is {this.props.date.toTimeString()} 
     </p> 
    ); 
    } 
}); 

setInterval(function() { 
    React.render(
    <HelloWorld date={new Date()} />, 
    document.getElementById('container') 
); 
}, 1000); 

Код для utility1.js

var MyComponent = React.createClass({ 
    handleClick: function() { 
    // Explicitly focus the text input using the raw DOM API. 
    React.findDOMNode(HelloWorld.refs.mytestinput).focus(); 
    }, 
    render: function() { 
    // The ref attribute adds a reference to the component to 
    // this.refs when the component is mounted. 
    return (
     <div> 
     <input type="text" ref="myTextInput" /> 
     <input 
      type="button" 
      value="Focus the text input" 
      onClick={this.handleClick} 
     /> 
     </div> 
    ); 
    } 
}); 

React.render(
    <MyComponent />, 
    document.getElementById('container1') 
); 

Проблема здесь в том, что я хочу сосредоточиться на вводе HelloWorld Component из утилиты.js из утилиты utility.js. Я видел их как один метод findDOMNode для смонтированных компонентов. Но этот код не работает для меня. Может кто-нибудь попробовать этот JS Fiddle here и сообщить мне о возможном решении.

Answer 1

Refs являются локальными для компонента, на котором они определены, поэтому HelloWorld.refs.mytestinput недействителен. Кроме того, поскольку MyComponent и HelloWorld являются частью двух разных приложений React (созданных двумя разными вызовами на React.render), нет никакого встроенного способа доступа к refs в HelloWorld от MyComponent. Вам нужно будет установить какую-то глобальную ссылку на компонент, использовать сообщение, передаваемое из одного приложения в другое, испускать какие-то события, указывающие, что вход должен быть сфокусированным, или использовать какой-либо другой метод «глобальной» связи.

Answer 2

Вам необходимо создать глобальную систему событий, чтобы позволить обоим компонентам communicate with each other, если они не находятся в отношениях родитель-потомок. Здесь больше информации о global event system

Вот решение: jsfiddle

var CustomEvents = (function() { 
    var _map = {}; 

    return { 
    subscribe: function(name, cb) { 
     _map[name] || (_map[name] = []); 
     _map[name].push(cb); 
    }, 

    notify: function(name, data) { 
     if (!_map[name]) { 
     return; 
     } 

     // if you want canceling or anything else, add it in to this cb loop 
     _map[name].forEach(function(cb) { 
     cb(data); 
     }); 
    } 
    } 
})(); 

Answer 3

Просто используйте

this.refs.myTextInput 

https://jsfiddle.net/e0cjqLu2/

Answer 4

var HelloWorld = React.createClass({ 
    componentDidMount: function() { 
    React.findDomNode(this.refs.mytestinput).focus() 
    }, 
    ... 
}); 

или если ваш React.js вверх к -date, используйте это:

componentDidMount() { 
    this.refs.mytestinput.focus() 
}