时间戳

首页 > 解决方案 > 如果页面上有很多，如何更改 1 选择的值

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

问题描述

如果页面上有很多，如何更改 1 select 的值。我在表 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>
    );
  }
}

标签： reactjsmaterial-ui

解决方案

每个选择都需要单独的状态。您可以使用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>
      ...
  )
}

推荐阅读