无法从React中的Textfield中获取值？

Question

代码如下。哪里有一个表单，我想从FullName和Email的文本字段中获取值，但我收到错误的未定义属性的电子邮件。我想访问文本字段值。我怎么能这样做我这不是道具的方式。请注意，我不熟悉React。

我在参加我的COAD时遇到的错误如下所示。

index.js?aa0c:21 Uncaught TypeError: Cannot read property 'email' of undefined
    at Object.onClick (eval at ./app/containers/LoginPage/index.js (http://localhost:3001/0.chunk.js:7:1), <anonymous>:104:27)
    at Object.proxiedMethod [as onClick] (eval at ./node_modules/react-proxy/modules/createPrototypeProxy.js (http://localhost:3001/main.js:2282:1), <anonymous>:44:30)
    at EnhancedButton._this.handleClick (webpack:///./~/material-ui/internal/EnhancedButton.js?:144:21)
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./~/react-dom/lib/ReactErrorUtils.js?:69:16)
    at executeDispatch (webpack:///./~/react-dom/lib/EventPluginUtils.js?:85:21)
    at Object.executeDispatchesInOrder (webpack:///./~/react-dom/lib/EventPluginUtils.js?:108:5)
    at executeDispatchesAndRelease (webpack:///./~/react-dom/lib/EventPluginHub.js?:43:22)
    at executeDispatchesAndReleaseTopLevel (webpack:///./~/react-dom/lib/EventPluginHub.js?:54:10)
    at Array.forEach (native)
    at forEachAccumulated (webpack:///./~/react-dom/lib/forEachAccumulated.js?:24:9)
    at Object.processEventQueue (webpack:///./~/react-dom/lib/EventPluginHub.js?:257:7)

这是我的index.js文件。

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from 'material-ui/TextField';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import DatePicker from 'material-ui/DatePicker';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { GridList, GridTile } from 'material-ui/GridList';
import Checkbox from 'material-ui/Checkbox';
import RaisedButton from 'material-ui/RaisedButton';

export default class Login extends Component {
  state = {
    value: null,
  };

  onClick() {
    const text = this.refs.email.getValue();
    console.log("when clicking, the form data is:", text);
    console.log(this.refs.email.getValue());
  }
  handleChange = (event, index, value) => this.setState({ value });
  render() {
    return (
      <div className="md-card">
        <div className="md-card-content large-padding">
          <form id="form_validation" className="uk-form-stacked" >
            <div className="uk-grid" data-uk-grid-margin>
              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <TextField
                    ref={(input) => { this.fullname = input; }}
                    floatingLabelText="Full Name"
                    fullWidth={true}
                  />
                </div>
              </div>

              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <TextField
                    hintText=""
                    ref='email'
                    floatingLabelText="Email"
                    fullWidth={true}
                  />
                </div>
              </div>
            </div>

            <div className="uk-grid" data-uk-grid-margin>
              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <DatePicker
                    hintText="Birthdate"
                    container="inline"
                    mode="landscape"
                    fullWidth={true}
                  />
                </div>
              </div>

              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <label className="uk-form-label">Gender:</label>
                  <RadioButtonGroup name="shipSpeed" defaultSelected="not_light" >

                    <RadioButton
                      value="Male"
                      label="Male"
                    />

                    <RadioButton
                      value="Female"
                      label="Female"
                    />
                  </RadioButtonGroup>
                </div>
              </div>
            </div>
            <div className="uk-grid">
              <div className="uk-width-medium-1-2">
                <div className="parsley-row">

                  <label className="uk-form-label">Hobbies:</label>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Skiing"
                    />
                  </span>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Running"
                    />
                  </span>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Reading"
                    />
                  </span>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Swimming"
                    />
                  </span>
                </div>
              </div>

              <div className="uk-width-medium-1-2">

                <SelectField
                  floatingLabelText="Press?"
                  value={this.state.value}
                  onChange={this.handleChange}
                >
                  <MenuItem value={null} primaryText="" />
                  <MenuItem value={false} primaryText="Internet" />
                  <MenuItem value={true} primaryText="Words of Mouth" />
                </SelectField>
              </div>
            </div>
            <div>
              <TextField
                hintText=""
                floatingLabelText="Message"
                multiLine={true}
                rows={2}
                rowsMax={4}
                fullWidth={true}
              />
            </div>


            <RaisedButton label="Primary" primary={true} onClick={this.onClick} />
          </form >
        </div>
      </div>
    );
  }

}

Answer 1

使用ref获取组件的值（例如输入）在反应式功能编程中并不正确。 （阅读：https://facebook.github.io/react/docs/forms.html）

尝试监听每个输入的更改事件并保持它们更改为状态，这样您就可以为它们提供值并控制它们。这将使您能够拥有值，清理它们或从其他地方更改它们。

以下是您的代码，其受控输入为fullname和email。 您也可以在material-ui docs中查看（在每个组件的受控示例部分下）。

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from 'material-ui/TextField';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import DatePicker from 'material-ui/DatePicker';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { GridList, GridTile } from 'material-ui/GridList';
import Checkbox from 'material-ui/Checkbox';
import RaisedButton from 'material-ui/RaisedButton';

export default class Login extends Component {
  state = {
    value: null,
    fullname: ""
    email: ""
  };

  onClick() {
    console.log(this.state.fullname);
    console.log(this.state.email);
  }
  handleChange = (event, index, value) => this.setState({ value });
  render() {
    return (
      <div className="md-card">
        <div className="md-card-content large-padding">
          <form id="form_validation" className="uk-form-stacked" >
            <div className="uk-grid" data-uk-grid-margin>
              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <TextField
                    ref={(input) => { this.fullname = input; }}
                    floatingLabelText="Full Name"
                    fullWidth={true}
                    value={this.state.fullname}
                    onChange={(event, value) => { this.setState({ fullname: value }); }}
                  />
                </div>
              </div>

              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <TextField
                    hintText=""
                    ref='email'
                    floatingLabelText="Email"
                    fullWidth={true}
                    value={this.state.email}
                    onChange={(event, value) => { this.setState({ email: value }); }}
                  />
                </div>
              </div>
            </div>

            <div className="uk-grid" data-uk-grid-margin>
              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <DatePicker
                    hintText="Birthdate"
                    container="inline"
                    mode="landscape"
                    fullWidth={true}
                  />
                </div>
              </div>

              <div className="uk-width-medium-1-2">
                <div className="parsley-row">
                  <label className="uk-form-label">Gender:</label>
                  <RadioButtonGroup name="shipSpeed" defaultSelected="not_light" >

                    <RadioButton
                      value="Male"
                      label="Male"
                    />

                    <RadioButton
                      value="Female"
                      label="Female"
                    />
                  </RadioButtonGroup>
                </div>
              </div>
            </div>
            <div className="uk-grid">
              <div className="uk-width-medium-1-2">
                <div className="parsley-row">

                  <label className="uk-form-label">Hobbies:</label>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Skiing"
                    />
                  </span>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Running"
                    />
                  </span>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Reading"
                    />
                  </span>
                  <span className="icheck-inline">
                    <Checkbox
                      label="Swimming"
                    />
                  </span>
                </div>
              </div>

              <div className="uk-width-medium-1-2">

                <SelectField
                  floatingLabelText="Press?"
                  value={this.state.value}
                  onChange={this.handleChange}
                >
                  <MenuItem value={null} primaryText="" />
                  <MenuItem value={false} primaryText="Internet" />
                  <MenuItem value={true} primaryText="Words of Mouth" />
                </SelectField>
              </div>
            </div>
            <div>
              <TextField
                hintText=""
                floatingLabelText="Message"
                multiLine={true}
                rows={2}
                rowsMax={4}
                fullWidth={true}
              />
            </div>


            <RaisedButton label="Primary" primary={true} onClick={this.onClick} />
          </form >
        </div>
      </div>
    );
  }

}