如何在无状态组件中单击按钮获得输入值？

Question

could you please tell me how to get input value on button click in stateless component .I want to pass input value in container component I tried like this .here is my code 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;

here I want input value in this function

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

val is input field value whatever user enter in input field

Answer 1

You don't need to give onClick a fat arrow function. Just give it the reference to the addButtonClickHandler , like this:

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

You can do a fat arrow function if you want (not recommended), but in that case you need to pass the event too:

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