如何在無狀態組件中單擊按鈕獲得輸入值？

Question

您能告訴我如何在無狀態組件中單擊按鈕時獲取輸入值嗎？我想在container component傳遞輸入值，我試圖這樣做。這是我的代碼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是input field value無論用戶在輸入字段中輸入什么

Answer 1

您不需要給onClick箭頭功能。 只需為其提供對addButtonClickHandler的引用，如下所示：

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

您可以根據需要執行粗箭頭功能（不建議這樣做），但是在這種情況下，您也需要傳遞事件：

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