reactjs - 克服无状态组件中缺少引用的问题

我想创建一个无状态的搜索组件。单击按钮时，我需要访问搜索字段的值。以下是可以接受的方法吗？这种方法有什么缺点吗？

const Search = ({onBtnClick}) => {
    const onClick = (e) => {
      const query = e.target.previousSibling.value;
      onBtnClick(query);
    };

    return(
      <div>
        <input type="search" />
        <button onClick={onClick}>Search</button>
      </div>
    )
  }

最佳答案

在无状态组件中，您可以将 ref 与 function 一起使用，就像这样

const Search = ({ onBtnClick }) => {
  let search;

  const setNode = (node) => {
    search = node;
  };

  const onClick = () => {
    onBtnClick(search.value);
  };

  return (
    <div>
      <input type="search" ref={ setNode } />
      <button onClick={ onClick }>Search</button>
    </div>
  );
}

function onBtnClick(value) {
  console.log(value);
}

ReactDOM.render(
  <Search onBtnClick={onBtnClick} />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

关于reactjs - 克服无状态组件中缺少引用的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35918706/