仅更新 1 个组件而不是 ReactJS 中的所有组件

Question

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

我是第一次做 React，所以我连基础知识都不知道。

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。为了解决这个问题，我调整了每个 onChange 回调，partially applying 回调带有它应该更新的字段名称。

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>
    );
  }
}

仅更新 1 个组件而不是 ReactJS 中的所有组件

Update only 1 component instead of all in ReactJS

drop-down-menu

reactjs

material-ui