我具有以下功能组件

const input = props => (
  <div>
    <input placeholder="Type a message..." />
    <div onClick={props.send} className="icon">
      <i className="fa fa-play" />
    </div>
  </div>
)

如何将输入的值传递给props.send()

最佳答案

我在React的官方文档中找到了针对此确切场景的解决方案:https://reactjs.org/docs/refs-and-the-dom.html#refs-and-functional-components
这种方法使您的组件保持无状态,也不需要您在每次更改时都更新父组件。
基本上,

const input = props => {

let textInput = React.createRef();

function handleClick() {
  console.log(textInput.current.value);
}

return (
    <div>
      <input ref={textInput} placeholder="Type a message..." />
      <div onClick={handleClick} className="icon">
        <i className="fa fa-play" />
      </div>
    </div>
  )
}

09-30 13:35
查看更多