在ReactJS

Question

在此代码中有2个下拉列表。我也试图执行类似的功能。我的项目有2个下拉菜单，但是当我更改值时，每个项目都应该有单独的值。如果我使用此代码，那么下拉列表的值都是相同的。应该改变什么？

我正在做第一次反应，所以我甚至不知道基本的正确。

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

const styles = {
  customWidth: {
    width: 200,
  },
};

export default class DropDownMenuSimpleExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: 1};
  }

  handleChange = (event, index, value) => this.setState({value});

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.value} onChange={this.handleChange}>
          <MenuItem value={1} primaryText="Never" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
        </DropDownMenu>
        <br />
        <DropDownMenu
          value={this.state.value}
          onChange={this.handleChange}
          style={styles.customWidth}
          autoWidth={false}
        >
          <MenuItem value={1} primaryText="Custom width" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
        </DropDownMenu>
      </div>
    );
  }
}

Answer 1

class SomeComponent extends React.Component {
    constructor(props) {
        this.state = {
            dropdownA: "someValue",
            dropdownB: "someOtherValue"
        }
    }

    handleChange = (which, event) => {
        this.setState({ [which]: event.target.value })
    }

    render() {
        return (
            <div>
                <DropDownMenu 
                    value={this.state.dropdownA} 
                    onChange={this.handleChange.bind(null, 'dropdownB')}
                >
                    <MenuItem value={1} primaryText="Never" />
                    <MenuItem value={2} primaryText="Every Night" />
                    <MenuItem value={3} primaryText="Weeknights" />
                    <MenuItem value={4} primaryText="Weekends" />
                    <MenuItem value={5} primaryText="Weekly" />
                </DropDownMenu>

                <br />

                <DropDownMenu
                    value={this.state.dropdownB}
                    onChange={this.handleChange.bind(null, 'dropdownB')}
                    style={styles.customWidth}
                    autoWidth={false}
                >
                    <MenuItem value={1} primaryText="Custom width" />
                    <MenuItem value={2} primaryText="Every Night" />
                    <MenuItem value={3} primaryText="Weeknights" />
                    <MenuItem value={4} primaryText="Weekends" />
                    <MenuItem value={5} primaryText="Weekly" />
                </DropDownMenu>
            </div>
        )
    }
}

特别是，我已更新每个DropDownMenu以使用父组件状态的自己的字段：第一个dropdownA和第二个dropdownB。为了解决这个问题，我已经为每个partially applying回调调整了onChange回调，并使用应该更新的字段的名称。

Answer 2

您可以为单独的DropDownMenu实例

定义单独的处理程序

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

const styles = {
  customWidth: {
    width: 200,
  },
};

export default class DropDownMenuSimpleExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: 1};
  }

  handleValue1Change = (event, index, value1) => this.setState({value1});

  handleValue2Change = (event, index, value2) => this.setState({value2});

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.value1} onChange={this.handleValue1Change}>
          <MenuItem value={1} primaryText="Never" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
        </DropDownMenu>
        <br />
        <DropDownMenu
          value={this.state.value2}
          onChange={this.handleValue2Change}
          style={styles.customWidth}
          autoWidth={false}
        >
          <MenuItem value={1} primaryText="Custom width" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
        </DropDownMenu>
      </div>
    );
  }
}