javascript - React 组件，为什么你的一半 props 在表单提交时未定义？

Question

React 新手，希望这不是非常明显的事情。我已经把头撞在墙上有一段时间了。

根据 Chrome 中的 React Dev Tools，定义了所有表单的 props 以及我期望的内容。即使提交了表格。太棒了。

不幸的是，在handleSubmit()中，只有其中两个可见:id和name。尽管在开发工具中显示了正确的值，但Person和value都未定义。

为什么世界上有一半(而且只有一半)的 Prop 显示为未定义？

  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
    });
}