反応コンポーネント、フォーム送信時にあなたの小道具の半分が未定義になっているのはなぜですか？

Question

反応が新しく、これは何かがひどく明白でないことを願っています。私はしばらく壁に頭を打っていた。

ChromeのReact Dev Toolsによると、フォームのすべての小道具が定義されており、それらの小道具が期待されています。フォームが提出された場合でも。すばらしいです。

残念なことに、handleSubmit（）内に、それらの2つだけが見える：ID、及び名。 人および値は、Dev Toolsで正しい値が表示されているにもかかわらず、のいずれも未定義です。

なぜ小道の半分（そしてわずか半分）がとして定義されていないのですか？

import React, {Component} from 'react'; 
    import { 
    TextField, 
    IconButton, 
    FlatButton, 
    DatePicker, 
    Snackbar, 
    RaisedButton, 
    LinearProgress, 
    Dialog, 
    DropDownMenu, 
    MenuItem, 
    AppBar 
} from 'material-ui'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import EditAttachFile from 'material-ui/svg-icons/editor/attach-file.js'; 
import NotificationSync from 'material-ui/svg-icons/notification/sync.js'; 
import EventNote from 'material-ui/svg-icons/notification/event-note.js'; 

class NameFirstForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: props.person.getAttr('nameFirst')}; 


    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 
    this.setState({value: nextProps.person.getAttr('nameFirst')}); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    console.log("value", event.target.value); 
    event.preventDefault(); 
    this.props.save.call(this.props.ctx, event); 
    } 

    render() { 
    return (
     <div> 
     <form 
     onSubmit={this.handleSubmit} 
     name="nameFirst" 
     id={this.props.person.getAttr('id')} 
     person={this.props.person} 
     value={this.state.value} 
     > 
     <MuiThemeProvider> 
      <TextField 
      name="nameFirst" 
      id={this.props.person.getAttr('id')} 
      person={this.props.person} 
      value={this.state.value} 
      underlineStyle={ {color: 'rgb(0,188,212)' } } 
      floatingLabelFixed={true} 
      floatingLabelText="First Name" 
      onChange={this.handleChange} 
      /> 
     </MuiThemeProvider> 
     </form> 
     </div> 
    ); 
    } 
} 

export default NameFirstForm; 

Answer 1

問題は、フォームから値を読み取ることです。私が見ることはあなたがちょうどこのようなあなたの状態とあなたのプロパティから正しい値を持つオブジェクトを返す可能性があることです。

handleSubmit(event) { 
    event.preventDefault(); 
    this.props.save.call(this.props.ctx, { 
     person: this.props.person, 
     id: this.props.person.getAttr('id'), //You could skip this if you already have the person object 
     newValue: this.state.value 
    }); 
}