Question

如何更改值1选择页面上是否有很多选择。我在表col中有8个选择，每个选择必须分别更改。我不了解如何分别针对每个对象执行此操作。当我选择意见时，所有选择都会更改值。

import React, { Component } from "react";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default class Demo extends Component {
  state = {
    productTaxes: [
      { label: "Tax 8%", value: 10 },
      { label: "Tax 23%", value: 11 }
    ],
    selected: "10",
  };
  handleSelect = (e, key, type) => {
    this.setState({
      selected: e.target.value
    });
  };
  render() {
    return (
      <div>
        <FormControl>
          <Select
            name={1}
            value={10}
            onChange={e => this.handleSelect(e, "tax")}
          >
            {this.state.productTaxes.map((tax, i) => {
              return (
                <MenuItem key={i} value={tax.value}>
                  {tax.label}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
        <FormControl>
          <Select
            name={2}
            value={this.state.selected}
            onChange={e => this.handleSelect(e, "tax")}
          >
            {this.state.productTaxes.map(tax => {
              return (
                <MenuItem key={`tax${tax.value}`} value={tax.value}>
                  {tax.label}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
      </div>
    );
  }
}

Answer 1

从您的演示中可以看到，您只是处于状态中的财产。如果您要更改第一个选择的值，它将更新状态，从而使第二个选择具有相同的值。

对于每个选择字段，您应在其状态下拥有不同的属性。

Answer 2

您需要独立保存每个选择值。您可以像这样使用名称标签：

import React, { Component } from "react";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default class Demo extends Component {
  state = {
    productTaxes: [
      { label: "Tax 8%", value: 10 },
      { label: "Tax 23%", value: 11 }
    ],
    1: "10",
    2: "10",
  };
  handleSelect = (e, key, type) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  render() {
    return (
      <div>
        <FormControl>
          <Select
            name={1}
            value={this.state[1]}
            onChange={e => this.handleSelect(e, "tax")}
          >
            {this.state.productTaxes.map((tax, i) => {
              return (
                <MenuItem key={i} value={tax.value}>
                  {tax.label}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
        <FormControl>
          <Select
            name={2}
            value={this.state[2]}
            onChange={e => this.handleSelect(e, "tax")}
          >
            {this.state.productTaxes.map(tax => {
              return (
                <MenuItem key={`tax${tax.value}`} value={tax.value}>
                  {tax.label}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
      </div>
    );
  }
}

这将在状态中独立保存每个选择值，并在选择时更新正确的值。您也不应使用索引作为菜单键。

Answer 3

每个选择都需要单独的状态。您可以使用name，

中的select属性

<Select
    name="select1"
    value={this.state.select1}
    onChange={e => this.handleSelect(e, "tax")}
>
  {this.state.productTaxes.map((tax, i) => {
      return (
        <MenuItem key={i} value={tax.value}>
            {tax.label}
        </MenuItem>
      );
  })}
</Select>

您可以对所有选择执行相同的操作。

您的handleSelect函数应该是

handleSelect = (e, key, type) => {
    this.setState({
      [e.target.name]: e.target.value
    });
};

注意：避免对name使用数字，这不是一个好习惯。使用更具体的字符串名称。

另一件事是，除非必要，否则不要将额外的参数传递给函数，

onChange={e => this.handleSelect(e, "tax")}

这可以简化为，

onChange={this.handleSelect}

您的功能可以是

handleSelect = (e) => { ... }

也不要重复代码。如果您觉得代码在重复，那么您始终可以将该部分分配给变量，并改用该变量，

render(){

  const options = this.state.productTaxes.map((tax, i) => {
       return (
          <MenuItem key={i} value={tax.value}>
              {tax.label}
          </MenuItem>
       );
  });

  return(
      ...
      <Select
        name="select1"
        value={this.state.select1}
        onChange={e => this.handleSelect(e, "tax")}
      >
        {options}
      </Select>
      ...
  )
}

如果页面上有很多选择，如何更改1的值

3 个答案: