标签: semantic-ui-react

当我在下拉组件中选择一个项目时，我期望 onChange 事件触发。但是，即使我单击其他地方，onChange 事件也会触发。如何防止onChange事件触发onBlur？

handleDomainChange = (e, data) => {
    this.setState({
      currantDomain_id: data.value,
      currantWidget_id: "null",
    }, () => {
      this.props.dispatch(
        statsFetch(
          this.props.viewRange,
          this.state.currantDomain_id,
          this.state.currantWidget_id
        )
      );
      this.widgetsDropdownOptions();
    });
  }

const DropdownDomains = () => (
      <Dropdown
        placeholder='all domains'
        className="dropdown-title"
        value={this.state.currantDomain_id}
        selection
        options={this.domainsDropdownOptions()}
        onChange={this.handleDomainChange}
        onBlur={this.nothing}
        />
    )

是否可以在没有触发器的情况下使用模态？我将通过州打开和关闭它.例如,我想在输入字段(带有文件名)上使用onClick来打开带有文件选择器的模态,然后在输入字段中编辑所选文件的名称.所有这些都是嵌套模式...如果我在没有触发器的父组件中有两个模态看起来更简单,我将通过open = {true/false}显示/隐藏它们

谢谢

我正在使用Semantic React UI 的 Dropdown，我希望它在其父组件安装后立即获得焦点：用户应该能够立即搜索。

我尝试使用render()父级的引用：

<Dropdown ref={dd => (this.MyDropdown = dd)}
        ... />

...然后componentDidMount在父组件的函数中调用它的焦点。但是Dropdown没有功能focus，所以这个方法行不通。

componentDidMount() {
    // I want to do something like the next line here, but 'focus' is not available on the component.
    //this.MyDropdown.focus();
  }

那我应该怎么做呢？

这是我迄今为止在 codeandbox 上尝试过的。请注意 中注释掉的行componentDidMount。

我有一个下拉菜单和一个模态,我想在点击其中一个下拉项目时显示模态.可能吗？我无法找到这样做的方法,因为我无法获得目标DropdownItem,这是Modal的触发道具所需要的.

export class Demo extends React.Component<{}, {}> {
  private options = [
    { text: 'doNothing', value: 'doNothing' },
    { text: 'openModal', value: 'openModal' },
  ]
  render() {
    return (
      <div>
        <Dropdown
          fluid
          selection
          options={this.options}
          defaultValue={this.options[0].value} />

        <Modal trigger={<Button>trigger</Button>}>
          <Modal.Header>Select a Photo</Modal.Header>
          <Modal.Content image>
            <Modal.Description>
              <p>Some contents.</p>
            </Modal.Description>
          </Modal.Content>
        </Modal>
      </div>
    )
  }
}

我正在使用语义 ui react，我正在使用 NavLink 和 Menu.Item 进行路由。

下面是我的导航栏组件：

const Navbar = () => (
  <div>
    <Container>
      <Menu secondary stackable widths={4}>
        <Menu.Item>
          <img src={Logo} alt="header" />
        </Menu.Item>
        <Menu.Item as={NavLink} to="/" name="home">
          <Icon name="home" size="large" />
          <p>Home</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/data" name="data">
          <Icon name="dashboard" size="large" />
          <p>Dashboard</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/user" name="user">
          <Icon name="user" size="large" />
          <p>User</p>
        </Menu.Item>
      </Menu>
    </Container>
  </div>
);

现在这里是问题所在。路由工作正常，但由于某种原因，“主页”菜单项始终处于活动状态。

然而，其他两条路线工作正常（即仅在路线正确时才设置为“活动”）

这是 /dashboard 路由处于活动状态时的样子

我的 App.jsx 中的路由代码：

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/data" component={Dashboard} /> …

我正在开发一个 ReactJS 应用程序，我试图在下拉列表（语义 UI 组件）中获取所选选项的文本；

exposedCampaignOnChange = (e, {value}) => {
    this.props.campaignExposedSelected(value);
};

<Dropdown
    placeholder='Campaign Exposed To'
    fluid
    search
    selection
    multiple
    options={this.state.campaigns}
    onChange={this.exposedCampaignOnChange}
/>

上面的代码返回值。this.state.campaigns由具有value和text属性的对象数组组成。除了value，我还想获取text所选选项的值。

感谢有关此事的任何指导。

目前我正在使用语义 UI 处理 React 页面，并且我正在努力寻找获得带圆角的 Input 组件的最简单方法。只是像往常一样应用 border-radius 似乎不起作用；有没有人有更好的想法？

（澄清一下 - 我正在寻找与 Semantic-React 中的 Search 组件基本相同的外观。）

在我的 React 应用程序中（使用SemanticUI），我在一个视图中呈现了多个组件，但是当用户想要打印页面时（例如通过在浏览器上按 Ctrl+P），我只希望可以打印一个部分

例如，如果这是用户看到的屏幕截图，则触发浏览器打印时，应在打印概览上显示绿色区域。

到目前为止，我在 SCSS 文件中

@media print{    
  .no-print, .no-print *{ display: none !important; }
}

添加不需要的组件会使它们消失，但打印区域中有空白区域并且绿色部分没有填充页面，如果这个绿色部分是可滚动的并且应该适合几页我只看到一页（一张 A4 纸包含什么我在屏幕上看到）

有

@media print {
  .print-content {
    display: block;
    width: 100%;
    height: 100%;
    page-break-after: always;
    overflow: visible;
  }
}

还没有得到相同的可打印视图

这是此屏幕截图的代码

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const GridExampleCelled = () => (
  <Grid celled>
    {/*another Grid.Row*/}

    <Grid.Row>
      <Grid.Column width={3}>
        <Image src='/images/wireframe/image.png' />
      </Grid.Column>
      <Grid.Column width={10}> /* This should be the component to …

我正在尝试在子组件中使用带有 DropDown 的 React-final-form。无法让这个工作。

我所有的文本字段都已经在子组件中，这就像一个魅力。父级中的字段如下所示：

<Field
    name="lastName"
    placeholder="Last Name"
    validate={required}
>
    {({input, meta, placeholder}) => (
        <MyField meta={meta} input={input} placeholder={placeholder}/>
    )}
</Field>

子组件如下所示：

export const MyField = (props) => {
    return (
        <Form.Field className={props.meta.active ? 'active' : ''}>
            <Label>{props.label ? props.label : props.placeholder}</Label>
            <Form.Input
                {...props.input}
                placeholder={props.placeholder}
                className={(props.meta.error && props.meta.touched ? 'error' : '')}
            />
        </Form.Field>
    )
};

“Form.Field” 和 “Label” 来自Semantic-ui-react

但现在我想用 DropDown 做同样的事情。标准 DropDown，取自 React-Final-Form 站点上的示例，如下所示：

<Field name="toppingsA" component="select">
    <option value="chicken">Chicken</option>
    <option value="ham">Ham</option>
    <option value="mushrooms">Mushrooms</option>
    <option …

我正在使用 Formik 在创建实体之前验证字段。有一个 Select 可以打开一个下拉菜单，用户必须从那里选择一个选项。

我收到一条错误消息，说 setFieldValue 未定义，但是在我没有找到此方法的任何定义之前我已经研究过，它只是这样使用，所以我不知道为什么会发生这种情况。

这是我的代码：

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { Button, Label, Grid } from 'semantic-ui-react';
import * as Yup from 'yup';

class CreateCompanyForm extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      industry: '',
    };
  }

  onChange = (e, { name, value }) => {
    this.setState({ [name]: value });
  };

  handleSubmit = values => {
    // ...
  };

  render() {
    const nameOptions = [
      { text: …