如何更改 material-ui 选择值？

Question

让我们首先考虑这个小片段：

import "./styles.css";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import Select from "@material-ui/core/Select";
import React, { Component } from "react";

class WidgetList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onChangeTag = (event, item) => {
    item.tag = event.target.value;
    console.log("changing tag", event.target, item.name);
  };

  render() {
    const { allItems } = this.props;
    const { selectedItems } = this.props;

    return (
      <List>
        {allItems.map((item) => {
          return (
            <ListItem
              key={item.name}
              role={undefined}
              dense
              button
              disableRipple
            >
              <ListItemIcon>
                <Checkbox
                  edge="start"
                  checked={selectedItems.has(item)}
                  tabIndex={-1}
                  disableRipple
                />
              </ListItemIcon>
              <ListItemText primary={`${item.name}`} />
              <ListItemSecondaryAction>
                <Select
                  native
                  value={item.tag}
                  onChange={(e) => this.onChangeTag(e, item)}
                >
                  <option value={0}>foo</option>
                  <option value={1}>bar</option>
                  <option value={2}>baz</option>
                </Select>
              </ListItemSecondaryAction>
            </ListItem>
          );
        })}
      </List>
    );
  }
}

let allItems = [
  { name: "1", tag: 0 },
  { name: "2", tag: 1 },
  { name: "3", tag: 2 }
];
let selectedItems = new Set([allItems[0], allItems[1]]);

export default function App() {
  return (
    <div className="App">
      <WidgetList allItems={allItems} selectedItems={selectedItems} />
    </div>
  );
}

我想了解单击不同小部件时更改选择小部件值的方法是什么。现在无论您选择哪一个小部件都不会改变。

要了解我的意思，您可以在此沙箱上使用它，无论您是否在选择小部件上选择foo、bar、baz值，小部件本身都不会更新。

Answer 1

您可以通过state实现uncontrolled component. 这样数据将由 DOM 而不是由 React 处理。

只需将组件value上的 prop更改为.SelectdefaultValue

<Select
  native
  defaultValue={item.tag}
  onChange={(e) => this.onChangeTag(e, item)}
>
  <option value={0}>foo</option>
  <option value={1}>bar</option>
  <option value={2}>baz</option>
</Select>

来自文档

对于不受控制的组件，您通常希望 React 指定初始值，但使后续更新不受控制。要处理这种情况，您可以指定一个defaultValue属性而不是value。

Answer 2

您需要更改存储所选项目状态的方法，以便它可以有效地处理它。

主要错误在这一行：

item.tag = event.target.value;

您不能这样做，因为该项目是不可变的。

我已经更新了您沙箱中的代码以使选择正常工作。

import "./styles.css";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import Select from "@material-ui/core/Select";
import React, { Component } from "react";

class WidgetList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allItems: [],
      selectedItems: {}
    };
  }

  onChangeTag = (event, item) => {
    this.setState({
      selectedItems: {
        ...this.state.selectedItems,
        [selectedItems[item.tag.toString()]]: event.target.value
      }
    });
  };

  render() {
    const { allItems } = this.props;
    const { selectedItems } = this.props;

    return (
      <List>
        {allItems.map((item) => {
          return (
            <ListItem
              key={item.name}
              role={undefined}
              dense
              button
              disableRipple
            >
              <ListItemIcon>
                <Checkbox
                  edge="start"
                  checked={selectedItems.has(item)}
                  tabIndex={-1}
                  disableRipple
                />
              </ListItemIcon>
              <ListItemText primary={`${item.name}`} />
              <ListItemSecondaryAction>
                <Select
                  native
                  value={selectedItems[item.tag.toString()]}
                  onChange={(e) => this.onChangeTag(e, item)}
                >
                  <option value={0}>foo</option>
                  <option value={1}>bar</option>
                  <option value={2}>baz</option>
                </Select>
              </ListItemSecondaryAction>
            </ListItem>
          );
        })}
      </List>
    );
  }
}

let allItems = [
  { name: "1", tag: 0 },
  { name: "2", tag: 1 },
  { name: "3", tag: 2 }
];
let selectedItems = new Set([allItems[0], allItems[1]]);

export default function App() {
  return (
    <div className="App">
      <WidgetList allItems={allItems} selectedItems={selectedItems} />
    </div>
  );
}