如何更改1个如果页面上有很多值的值

Question

如果页面上有很多，则如何更改1选择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

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

使用name属性

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

Answer 2

从我从您的演示中看到的东西，您只有在州的财产。如果您要更改第一个选择的值，它将更新状态，这会导致您的第二个选择具有相同的值。

对于每个选择字段，您应该在州中具有不同的属性。

Answer 3

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

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

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