Handle狀態在一個句柄中的變化用一個handleChange方法爲selectFields和TextFields

我想知道如何用一個handleChange方法處理狀態變化。Handle狀態在一個句柄中的變化用一個handleChange方法爲selectFields和TextFields

我處理了兩個帶有handleChange的文本字段，但我無法弄清楚如何使用相同的handleChange方法處理SelectField上的更改。

當從風箏衝浪跳水和的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;

來源

2017-08-28 Isak La Fleur

請爲其添加plunker /小提琴 –

你的handleChange方法的內部邏輯需要一些反思。看起來你試圖讓事情比他們需要的複雜得多。你的例子很難重現，除非有人想自己創建，這可能是沒有人回答它的原因。

但是我做了一個類似於Codepen工作的例子，沒有使用材質UI包，因爲我不知道如何將這些包正確添加到Codepen中。

爲了讓您更容易，我剛剛選擇了適合您的菜單，並且現在忽略了其他菜單。希望這會幫助你想象如何合併邏輯來正確處理其他人。

檢查筆here。您會看到我將handleChange方法更改爲兩行代碼，而無需使用Object.assign。

如果你能得到你的具體例子的完整工作版本，我很樂意改變答案來反映這一點，但就像我說的，這裏的人不容易再現。

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

來源

2017-08-28 16:05:12

'event.target.value'不適用於SelectField –

我也沒弄明白怎麼只有一個方法處理這個問題，所以我創建了一個獨特的SelectFields因爲此方法需要三個道具。

來源

2017-08-28 20:09:53

Handle狀態在一個句柄中的變化用一個handleChange方法爲selectFields和TextFields

回答

相關問題