是否可以在不使用ref的情况下调用dom元素方法（如focus（））？ （无状态组件功能）

Question

我尝试尽可能少地使用refs，但似乎没有办法调用本机dom方法（focus（），reset（），blur（）等），所以我＆＃39;好吧，那个。 除之外，我想使用新的无状态组件函数来处理表单输入这样的基本内容，就目前而言，这些无状态组件不允许使用refs指向它们（它们将返回null）。我知道我可以在无状态组件周围添加一个常规的React类组件包装器，以允许ReactDOM.findDOMNode（ref）正常工作，但如果始终必须包装无状态函数，那又有什么意义呢？我错过了什么吗？

Answer 1

这是我提出的一个解决方案，它不需要在类中包装无状态组件。相反，它涉及父函数将函数作为prop传递给无状态组件，该函数用作DOM元素上ref的回调函数。

首先在有状态父项上设置一个方法，该方法将用作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} />
  }
})

无状态组件假定一个方法将从父级调用refCallback传递给它。此prop可以传递任意数量的组件生成以到达DOM元素。

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

Answer 2

使用类组件（es6）将无状态组件包装为附加引用。它写在official docs

中

Answer 3

我找到的最干净的解决方案是设置一个局部变量，然后为其指定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>
    );

};

Answer 4

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

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

elems.input.focus();

Answer 5

对于无状态组件也遇到了这个问题。至少在React v16中，您可以获得对此元素的引用：

uploadArchives