在 React Semantic-UI 中,可以为输入元素提供一个方便的操作按钮或图标,如下所示:
http://react.semantic-ui.com/elements/input/#variations-action-icon-button
不幸的是,文档在解释操作如何触发函数方面确实很差。这里问了你应该如何做到这一点的问题:
https://github.com/Semantic-Org/Semantic-UI-React/issues/1944
答案似乎是您应该在图标或按钮上使用 onClick。看起来像这样:
<Input
action={{
icon: 'play', onClick: (event,data)=>{console.log(data);}
}}
defaultValue="I bet you wish you could access this!"
/>
虽然这看起来合乎逻辑,但它提出了一个问题当传递给 onClick 函数的数据描述的是图标而不是输入时,如何访问输入的值?
最佳答案
按照您尝试执行此操作的方式,您需要为 <Input>
创建一个引用组件,然后从该目标获取值。然而,更好的方法是控制状态中的输入值。然后,您可以拥有一个单击处理程序函数,每次单击按钮时该函数都会从状态获取输入值。
<Input
action={{
icon: "play",
onClick: () => this.handleClick()
}}
defaultValue={this.state.value}
onChange={this.handleInputChange}
/>
这是一个快速的 Codesandbox 示例,展示了它的工作原理:https://codesandbox.io/s/y3j4m703ov
关于reactjs - 从 SemanticUI 中的 onClick 操作中检索输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51632679/