我具有以下功能组件
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>
)
}