Question

我想知道如何使用一个handleChange方法处理状态更改。

我使用handleChange处理两个文本字段，但我无法弄清楚如何使用相同的handleChange方法处理SelectField上的更改。

将Spot Type从Kitesurfing更改为Diving和console.log this.state我得到了这个：

form
:
description: "This is a amazing spot in Spain."
name: "Blue water"
spotType: "Kitesurfing"
undefined: undefined <-- this is from the SelectField, when changing from Kitesurfing to Diving..

AddASpot.js

import React, { Component } from "react";
import TextField from "material-ui/TextField";
import SelectField from "material-ui/SelectField";
import MenuItem from "material-ui/MenuItem";
import RaisedButton from "material-ui/RaisedButton";

class AddASpot extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        spotType: "Kitesurfing"
      }
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange = event => {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    const form = Object.assign({}, this.state.form);
    form[name] = value;

    this.setState({ form });
  };

  handleSubmit = () => {
    console.log(this.state);
  };
  render() {
    return (
      <div>
        <h1>Add a new Spot</h1>
        <TextField
          name="name"
          onChange={this.handleChange}
          hintText="Name of Spot"
        />
        <br />
        <SelectField
          floatingLabelText="Spot Type"
          name="spotType"
          value={this.state.form.spotType}
          onChange={this.handleChange}
        >
          <MenuItem value="Diving" primaryText="Diving" />
          <MenuItem value="Kitesurfing" primaryText="Kitesurfing" />
          <MenuItem value="Surfing" primaryText="Surfing" />
          <MenuItem value="Spearfishing" primaryText="Spearfishing" />
        </SelectField>
        <br />
        <TextField
          name="description"
          onChange={this.handleChange}
          hintText="Description of the Spot"
          multiLine={true}
          rows={3}
          rowsMax={4}
        />
        <br />
        <RaisedButton
          onClick={this.handleSubmit}
          label="Add Spot"
          primary={true}
        />
      </div>
    );
  }
}

export default AddASpot;

Answer 1

你在handleChange方法中的逻辑需要重新考虑。看起来你正试图让事情变得比他们需要的复杂得多。你的例子难以复制，除非有人想自己建立这个，这可能就是为什么还没有人回答它。

但是我在Codepen中使用了类似的示例，没有使用的材质UI包，因为我不知道如何将这些包正确地添加到Codepen中。

为了让您更轻松，我只是让您选择菜单，暂时忽略其他菜单。希望这将有助于您想象如何合并逻辑以正确处理其他逻辑。

检查笔here。您将看到我将handleChange方法更改为两行代码，而无需使用Object.assign。

如果你能得到你的具体例子的完整工作版本，我很乐意改变答案来反映这一点，但就像我说的那样，在这里为人们复制并不容易。

  handleChange = event => {
    const value = event.target.value
    this.setState({ form: { spotType: value } })
  };

Answer 2

我没有弄清楚如何只用一种方法处理这个问题，所以我为SelectFields创建了一个唯一的方法，因为这个方法需要三个道具。

  handleChangeSelectField = (event, index, value) => {
    const form = Object.assign({}, this.state.form);
    form["spotType"] = value;
    this.setState({ form });
  };

使用一个handleFhange方法处理React中的状态更改selectFields和TextFields

2 个答案: