Question

使用Semantic-UI / ReactJS想要在onClick上添加button函数，但是当我添加时，它也会在input上调用函数，但是我只想在button

上添加

handleClick= (e) => this.setState({ click: true});
...
  <Input
    action={{
      color: 'teal',
      labelPosition: 'left',
      icon: 'cart',
      content: 'Checkout',
    }}
    actionPosition='left'
    placeholder='Search...'
    defaultValue='52.03',
    onClick={this.handleClick}
      />

结果：

<div class="ui left action input">
  <button class="ui teal icon left labeled button">
    <i aria-hidden="true" class="cart icon"></i>
    Checkout
  </button>
  <input type="text" placeholder="Search..." value="52.03" />
</div>

请参见演示结果here，在此页面中，搜索You can pass a Button props object.以查找示例。

Answer 1

您需要在内部添加onClick属性。

action = {{
    color: 'teal',
    labelPosition: 'left',
    icon: 'cart',
    content: 'Checkout',
    onClick: handleClick
}}

Answer 2

由于您在action属性中传递了一个对象来创建按钮，因此您只需添加一个onClick属性

<Input
  action={{
    color: "teal",
    labelPosition: "left",
    icon: "cart",
    content: "Checkout",
    onClick: handleClick
  }}
  actionPosition="left"
  placeholder="Search..."
  defaultValue="52.03"
/>

https://codesandbox.io/s/semantic-ui-example-gyk4m?module=%2Fexample.js

React /语义UI在按钮上添加号召性用语

2 个答案: