Question

semantic-ui-react Dropdown对象不接受name或id属性，因此无法以与其他表单元素相同的方式处理更改。文档显示：

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

const options = [
  { key: 1, text: 'One', value: 1 },
  { key: 2, text: 'Two', value: 2 },
  { key: 3, text: 'Three', value: 3 },
]

export default class DropdownExampleControlled extends Component {
  state = {}

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

  render() {
    const { value } = this.state

    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            onChange={this.handleChange}
            options={options}
            placeholder='Choose an option'
            selection
            value={value}
          />
        </Grid.Column>
        <Grid.Column>
          <Segment secondary>
            <pre>Current value: {value}</pre>
          </Segment>
        </Grid.Column>
      </Grid>
    )
  }
}

将输入组合到单个事件处理程序中时，没有一种简洁的方法可以提取标识符来更新下拉列表的状态。这通常是如何处理的？

感谢

Answer 1

一种选择是在不同的输入控件上使用一个简单的包装器（不是不必要的膨胀），这样即使我们更改控件库，我们也会有有限的更改范围。下面是这种包装器的简单示例，并显示了为多个字段使用相同值更改处理程序的简单方法（即使对于不同类型的输入控件）：

import React, { Component } from 'react';
import { render } from 'react-dom';

const FIELD_NAMES = {
  FirstName: 'FirstName',
  LastName: 'LastName',
};

const TEXT_CONTAINER_STYLE = { padding: 5 };
function MyTextInput(props) {
  const {
    name,
    onChange,
    value,
  } = props;

  function handleValueChange(e) {
    onChange(name, e.target.value);
  }
  return (
    <div style={TEXT_CONTAINER_STYLE}>
      <input onChange={handleValueChange} value={props.value} />
    </div>
  );
}
class App extends Component {
  constructor() {
    super();
    this.state = {
    };
    this.state[FIELD_NAMES.FirstName] = '';
    this.state[FIELD_NAMES.LastName] = '';
  }

  handleValueChange = (fieldName, fieldValue) => {
    if (fieldName) {
      let newState = {};
      switch (fieldName) {
        case FIELD_NAMES.FirstName:
          newState[FIELD_NAMES.FirstName] = fieldValue;
          break;
        case FIELD_NAMES.LastName:
          newState[FIELD_NAMES.LastName] = fieldValue;
          break;
      }
      this.setState(newState);
    }
  }
  getFieldValue = (fieldName) => {
    return this.state[fieldName]
  }
  render() {
    return (
      <div>
        <MyTextInput
          name={FIELD_NAMES.FirstName}
          value={this.getFieldValue(FIELD_NAMES.FirstName)}
          onChange={this.handleValueChange}
        />
        <MyTextInput
          name={FIELD_NAMES.LastName}
          value={this.getFieldValue(FIELD_NAMES.LastName)}
          onChange={this.handleValueChange}
        />
        <div>
          {`First Name : ${this.getFieldValue(FIELD_NAMES.FirstName)}`}
        </div>
        <div>
          {`Last Name : ${this.getFieldValue(FIELD_NAMES.LastName)}`}
        </div>
      </div >
    );
  }
}

render(<App />, document.getElementById('root'));

Working example

如何在不创建多个处理程序的情况下处理表单中语义-ui-react Dropdown对象的输入更改？

1 个答案: