Question

我不明白semanticUI是如何从其组件中获取值的。

在以下示例中，handlechange功能如何与下拉列表进行通信。根据我的理解，当单击下拉列表中的选项时，它会将状态本地设置为该选项的值。但handleChange方法如何做到这一点？

handleChange = (e , { value }) => this.setState({ course:value})

我不明白{value}的来源。当我console.log(e.currentTarget)时，我获得了html元素，并且可以通过展开它来查看它所具有的价值，那么为什么我不能handleChange = (e) => this.setState({ course:e.currentTarget.value })

stackblitz

import React, { Component } from 'react'
import { Dropdown, Grid, Segment } from 'semantic-ui-react'
export default class CourseDropDown extends Component {
  state = {}

  handleChange = (e , { value }) => this.setState({ course:value})


  render() {
    const options = [
        { key: 1, text: 'Calculus I', value: 'Calculus I' },
        { key: 2, text: 'Calculus II', value: 'Calculus II' },
        { key: 3, text: 'Calculus III', value: 'Calculus III' }
      ]
    const { course } = this.state
    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            onChange={this.handleChange}
            options={options}
            placeholder='Choose a course'
            selection
            value={course}
          />
        </Grid.Column>
        <Grid.Column>
          <Segment secondary>
            <pre>Current course: {course}</pre>
          </Segment>
        </Grid.Column>
      </Grid>
    )
  }
}

Answer 1

这是一个已知的限制。 event.target是一个浏览器事件属性。但是，许多语义UI组件（如Dropdown，Checkbox和Radio）无法直接使用本机浏览器表单控件（如输入和选择）。它们使用程式化标记和自定义内部状态构建。

因此，某些回调没有可用的本机浏览器事件。这就是为什么Semantic-UI-React中的所有更改事件首先提供事件（如果可用），还提供包含所需数据的第二个参数。对于大多数任务，您永远不必访问本机浏览器事件。

您可以看到如何从文档中的第二个参数检索值的示例。例如Radio Group的例子。

要解决此问题，因为这不是错误。如果您觉得任何组件缺少第二个参数中的有用数据，请随意打开另一个问题，我们可以添加更多回调数据。

取自https://github.com/Semantic-Org/Semantic-UI-React/issues/638

我还重构了你的代码，以帮助你更好地理解它。

import React, { Component } from 'react'
import { Dropdown, Grid, Segment } from 'semantic-ui-react'

class CourseDropDown extends Component {
  constructor() {
    super();

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      course: ''
    };
  }

  handleChange(e, data) {
    this.setState({ course: data.value })
  }

  render() {
    const options = [
        { key: 1, text: 'Calculus I', value: 'Calculus I' },
        { key: 2, text: 'Calculus II', value: 'Calculus II' },
        { key: 3, text: 'Calculus III', value: 'Calculus III' }
      ]
    const { course } = this.state
    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            onChange={this.handleChange}
            options={options}
            placeholder="Choose a course"
            selection
            value={course}
          />
        </Grid.Column>
        <Grid.Column>
          <Segment secondary>
            <pre>Current course: {course}</pre>
          </Segment>
        </Grid.Column>
      </Grid>
    )
  }
}

export default CourseDropDown;

祝你好运！

在semanticUI中改变受控组件状态

1 个答案: