Question

如果我通过地图渲染所有这些选择，我将无法理解如何使其彼此独立。考虑到将来将要从redux存储中获取数据，如何正确实施？

详细的示例代码here

import React from "react";
import ReactDOM from "react-dom";
import Select from "@material-ui/core/Select/Select";
import InputLabel from "@material-ui/core/InputLabel/InputLabel";
import FormControl from "@material-ui/core/FormControl/FormControl";
import MenuItem from "@material-ui/core/MenuItem/MenuItem";

class App extends React.Component {
  state = {
    selectValue: "",
    selectTitle: [
      {
        title: "Title1"
      },
      {
        title: "Title2"
      }
    ]
  };
  handleChange = event => {
    console.log(event.target);
    this.setState({ [event.target.name]: event.target.value });
  };
  render() {
    const renderSelect = this.state.selectTitle.map((item, index) => 
      <FormControl key={index} style={{ width: "100%", marginTop: "27px" }}>
        <InputLabel htmlFor="age-auto-width">{item.title}</InputLabel>
        <Select
          value={this.state.selectValue}
          onChange={this.handleChange}
          inputProps={{
            name: "selectValue"
          }}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    );
    return (
      <div className="App">
        {renderSelect}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

编辑：https://github.com/vpulim/node-soap/blob/master/lib/wsdl.js#L669

两个选择都具有相同的值，因为每个<Select>元素都具有一个value道具，该道具从状态中的同一this.state.selectValue拉出。您需要以对应于其标题的方式分别存储每个值。

类似的东西：

state = {
  selectValue: {
    Title1: 10,
    Title2: 30
  },
  selectTitle: [
    {
      title: "Title1"
    },
    {
      title: "Title2"
    }
  ]
};

然后，在组件中进行更改以更正读写状态。

如何在渲染中做出一些变化的选择？

1 个答案: