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

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

在容器中显示图像
单击图像时，容器中会显示上传按钮而不是图像。
如果您在上传按钮（输入）外单击，而不选择要上传的图像，则会显示上一张图像而不是上传按钮。

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

“焦点在于：[对象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

ReactJS输入无法获得焦点

1 个答案: