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

Question

使用 Semantic-UI / ReactJS 想在 button 上添加 onClick 函数，但是当我添加时，它也会调用 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

由于您在 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

Answer 2

您需要添加 onClick 属性内部操作。

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

Answer 3

你用的是Input还有handleClick，不是Button，你需要分别用Input和Button，然后调用函数像这样的按钮：

<Input
  placeholder='Search...'
  defaultValue='52.03',
/>

<Button color='teal' content='Checkout' icon='cart' labelPosition='left' onClick={this.handleClick} />

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

React/Semantic UI add call to action on button

javascript

reactjs

semantic-ui

semantic-ui-react