javascript - 如何在无状态组件中单击按钮时获取输入值？

Question

您能告诉我如何在无状态组件中单击按钮时获取输入值吗？我想在容器组件中传递输入值我尝试这样。这是我的代码 https://codesandbox.io/s/l9j42k5q49

import React from "react";
import PropTypes from "prop-types";

const TabbarComponent = props => {
  const onInputChange = event => {};
  return (
    <div>
      <input type="text" />
      <button onClick={() => props.addEventHandler()}>Add Items</button>
    </div>
  );
};

TabbarComponent.propTypes = {
  addEventHandler: PropTypes.func
};

export default TabbarComponent;

这里我想在这个函数中输入值

addButtonClickHandler(val) {
    alert("ddd");
    let names = this.state.names.slice();
    names.push(val);
    this.setState({
      names: names
    });
  }

val 是输入字段值，无论用户在输入字段中输入什么内容

Answer 1

您不需要为 onClick 提供粗箭头函数。只需为其提供对 addButtonClickHandler 的引用，如下所示:

<button onClick={props.addEventHandler}>Add Items</button>

如果您愿意，您可以执行粗箭头功能(不推荐)，但在这种情况下，您也需要传递事件:

<button onClick={(e) => props.addEventHandler(e)}>Add Items</button>