克服无状态组件中缺少 refs答案

【问题标题】：Overcoming lack of refs in stateless components克服无状态组件中缺少 refs
【发布时间】：2017-01-04 13:47:24
【问题描述】：

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

在无状态组件中，您可以使用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>

【讨论】：

这很有趣。我想这种方法优于我的一个优点是它不依赖于input 是previousSibiling 的previousSibiling，使其更加灵活。另一方面，有更多的代码，并且可以说它更难阅读/遵循。这公平吗？

【解决方案2】：

我不是反应的鉴赏家，但我认为你的方法还可以，因为在官方反应文档中，我没有一次看到类似{value: event.target.value}：

这里我们有带状态的组件，并且有这个：

this.setState({value: event.target.value});

但我认为在没有状态的组件中可以使用：

let query = e.target.previousSibling.value;
onBtnClick(query);

PS：我也喜欢 Alexander T. 的回答。）

【讨论】：