javascript - ReactJS 输入没有获得焦点

Question

这是我的父组件(FundLogo)的代码:

var FundLogo = React.createClass({
getInitialState: function() {
    return { editing: false, img: "img/xxx.gif" };
},
onClick: function() {
    this.setState({ editing: true });
},
onBlur: function(newImg) {
    this.setState({ editing: false, img: newImg});
},
render: function() {
    return(
        <div className="banner_holder adj_height">
            {
                this.state.editing ?
                    <FundEditLogoBox onBlur={ this.onBlur } /> :
                    <img id="fund_logo" src={ this.state.img } onClick={ this.onClick } alt="finvesco logo" />
            }
        </div>
    );
}
});

这是子组件 (FundEditLogoBox) 的组件:

var FundEditLogoBox = React.createClass({
componentDidMount: function() {
    this.refs.editLogoBox.getDOMNode().focus();
    alert("Focus is on: " + document.activeElement);
},
onBlur: function() {
  this.props.onBlur(this.refs.editLogoBox.getDOMNode().value);
},
render: function() {
    return (
        <div>
            <input type="file" onBlur={ this.onBlur } accept="image/*" ref="editLogoBox" />
        </div>
    );
}
});

基本上我的代码应该做什么:

1. 在容器中显示图像
2. 点击图像后，容器中会显示上传按钮，而不是图像。
3. 如果您点击上传按钮(输入)外部，而没有选择要上传的图像，则会显示上一张图像，而不是上传按钮。

我遇到的问题是输入(来自子组件)在安装时没有获得任何焦点。我必须单击它才能获得焦点。此外，警报显示

"Focus is on: [object HTMLBodyElement]"

我在网络上到处寻找类似的问题，但没有任何效果，并且与其他问题不同，它似乎不是“重新渲染”问题...... 感谢您的帮助!

Answer 1

这就是您所需要的:

render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
  },

https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute