Reactjs 是否可以在不使用ref的情况下调用focus（）之类的dom元素方法？（无状态组件函数）

我尝试尽可能少地使用refs，但似乎没有办法调用本机dom方法（focus（）、reset（）、blur（）等），所以我对此没有意见。除此之外，我想使用新的无状态组件函数来处理表单输入等基本问题，目前来看，这些无状态组件不允许引用指向它们（它们将返回null）。我知道我可以在无状态组件周围添加一个常规的React类组件包装器，以允许ReactDOM.findDOMNode（ref）正常工作，但是如果无状态函数总是需要包装，那么它有什么意义呢？我遗漏了什么吗？

只要用类组件（es6）包装无状态组件，并附上一个参考。它写在中。我提出了一个解决方案，它不需要在类中包装无状态组件。相反，它涉及父级将函数作为prop传递给无状态组件，该prop用作DOM元素上ref的回调函数

const StatelessTextInput = ({refCallback, ...props}) => (
  <input {...props} ref={refCallback} />
)

首先在有状态父级上设置一个方法，该方法将用作对ref的回调，并在DOM元素上设置另一个操作方法（在本例中，在按键后聚焦）。然后将该方法作为道具发送给无状态子级

// note: Facebook now recommends using native js classes instead of React.createClass().
// note 2: You may need Babel to transpile some of ES6 syntax in use here.

const StatefulParent = React.createClass({
  getInitialState() {
    return {
      // doesn't matter for this example
    }
  },
  componentDidMount() {
    document.addEventListener('keyup', this.keyUp, false)
  },
  keyUp() {
    // calls the DOM focus method on the input when the 'tab' key is pressed
    if (e.keyCode === 9) this._input.focus()
  },
  inputSetter(ref) {
    this._input = ref
  },
  render() {
    <StatelessTextInput {...this.state} refCallback={this.inputSetter} />
  }
})

//注意：Facebook现在建议使用本机js类而不是React.createClass（）。
//注2：您可能需要Babel来传输此处使用的一些ES6语法。
const StatefulParent=React.createClass({
getInitialState（）{
返回{
//对于这个例子来说并不重要
}
},
componentDidMount（）{
document.addEventListener（'keyup'，this.keyup，false）
},
keyUp（）{
//按下“tab”键时对输入调用DOM focus方法
如果（e.keyCode===9）这个
},
输入设置器（ref）{
这是.\u输入=ref
},
render（）{
}
})

无状态组件假定将从名为refCallback的父级向其传递一个方法。这个道具可以向下传递任意数量的组件代以到达DOM元素

const StatelessTextInput = ({refCallback, ...props}) => (
  <input {...props} ref={refCallback} />
)

const无状态文本输入=（{refCallback，…props}）=>(
)

我找到的最干净的解决方案是设置一个局部变量，然后将ref赋值给它。然后，可以在需要时访问并聚焦：

const Item = () => {
    let input;

    const click = () => {
        if (input){
            input.focus();
        }
    };
    return (
        <div>
            <a href="#" onClick={click}>clickMe</a>
            <input ref={e => (input = e)}/>
        </div>
    );

};

const Item=（）=>{
让输入；
常量单击=（）=>{
如果（输入）{
input.focus（）；
}
};
返回(
（输入=e）}/>
);
};

是的，只需在渲染过程中记住并执行它，并在渲染后关注它：

function Main(props) {
    <input ref={e => { props.elems.input = e; }}
}
const elems = {};
ReactDOM.render(Main({ elems }), containerElement);

elems.input.focus();

主功能（道具）{
{props.elems.input=e；}
}
常量={}；
render（Main（{elems}），containerElement）；
elems.input.focus（）；

一个无状态组件也有这个问题。至少在React v16中，您可以获得对元素的引用，如下所示：

<Button
  onClick={(el) => {
    el.target.blur();
  }}>
  Button Text
</Button>

{
el.target.blur（）；
}}>
按钮文本

当然可以，但是如果必须将无状态函数包装到类中，那么创建无状态函数又有什么意义呢？在这种情况下，最好从类开始。无状态函数类似于纯函数，用于表示。只需抓取道具并渲染视图，无任何侧面效果。所以，如果您的组件需要一些非平凡的行为，那么是时候提取类组件了。谢谢！这很有帮助！是的，如果您在直接父元素中引用html元素，那么这很容易。但是如果有另一个层次的分离（祖父母需要孙子的ReF），中间的成分（父）是无状态的函数…这就是我提出的设想。