javascript - React 在 DOM 深处获取值(value)

Question

我对 React 不太熟悉，我尝试在登录/表单等方面构建以下抽象。

看看这个:

    var SignUpForm = React.createClass({

    handleSubmit: function(e) {
        e.preventDefault();
        console.log(this.refs.iitu_id.getDOMNode().value.trim())

        // iitu_id = this.refs.iitu_id.getDOMNode().value.trim();
        // password = this.refs.password.getDOMNode().value.trim();

        var error = UserValidator.valid({iitu_id: iitu_id, password: password});
        if (error) {
            this.setState({"errors": error });
            // console.log(error);
        } else {
            // console.log(error);
        }

    },

    getInitialState: function() {
        return {
            'errors': {
                iitu_id: null, 
                password: null
            }
        };
    },

    render: function() {
        return (
            /*jshint ignore:start */
            <form className="form-horizontal" onSubmit={this.handleSubmit} >
                <FormGroup label="iitu id" error_msg={this.state.errors.iitu_id} fieldName="iitu_id" fieldType="text" />
                <FormGroup label="password" error_msg={this.state.errors.password} fieldName="password" fieldType="password" />
                <ButtonGroup text="Войти"/>
            </form>
            /*jshint ignore:end */
        );
    }
});

var FormGroup = React.createClass({

    render: function() {
        var formGroupCss = 'form-group';
        if (this.props.error_msg){
            formGroupCss = 'form-group has-error';
        }

        return (
            /*jshint ignore:start */
            <div className={formGroupCss}>
                <Label fieldName={this.props.fieldName}>{this.props.label}</Label>
                <InputField type={this.props.fieldType}>{this.props.label}</InputField>
                <label className="control-label" for="inputError1">{this.props.error_msg}</label>
            </div>
            /*jshint ignore:end */
        );
    }
});



var ButtonGroup = React.createClass({
    render: function () {
        return (
            /*jshint ignore:start */
            <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                    <button className="btn btn-default">{this.props.text}</button>
                </div>
            </div>
            /*jshint ignore:end */
        );
    }
});

var InputField = React.createClass({
    render: function() {

        return (
            /*jshint ignore:start */
            <div className="col-sm-5">
                <input className="form-control" type={this.props.fieldType} placeholder={this.props.children}/>
            </div>
            /*jshint ignore:end */
        );
    }
});

exports.SignUpForm = SignUpForm;

代码有点多，但我认为它很容易阅读。问题是当我按下提交按钮时如何获取我的 InputField 类的值(只需获取表单值)？我的输入标签在 DOM 深处有问题。附加问题是否有以下代码设计我的意思是将每个逻辑组件描述为新的“类”？

Answer 1

如果您给表单输入 name属性，你可以使用表单的.elements集合以访问其输入。

我最近拆分了代码newforms将其用于可重复使用的 get-form-data模块，假设您的输入有 name，它会让您执行此操作属性:

var getFormData = require('get-form-data'); // Or just use the browser bundle

var SignUpForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var data = getFormData(e.target, {trim: true});
    var error = UserValidator.valid(data);
    if (error) {
      this.setState({errors: error});
    } else {
      // ...
    }
  },
  // ...

或者，如果您需要获得给定的输入，您可以添加 onChange <form> 的处理程序或包含所有表单输入的其他组件，而不必单独执行每个输入:

  handleChange: function(e) {
    var form = e.target.form;
    var name = e.target.name;
    var data = getFormData.getNamedFormElementData(form, name, {trim: true});
    // ...
  },

  render: function() {
    return <form onSubmit={this.handleSubmit} onChange={this.handleChange}>
      {/* ... */}
    </form>
  }
});