javascript - 使用 reactjs 提交表单

Question

我是 reactjs 的新手。我正在使用 reactjs 创建一个示例项目。首先，我收到类似状态为空的错误。设置初始状态后出现错误

I got Warning: valueLink prop on input is deprecated; set value and onChange instead

我知道有很多与此相关的问题，但我的问题没有解决，请帮忙。

代码如下:

import React, {Component} from 'react';
import {Link} from 'react-router'
import validator from 'validator';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
module.exports = React.createClass({
  mixins: [LinkedStateMixin],

  getInitialState() {
    return {};
  },

  saveData: function(){
    //console.log(this.state)
  },

  render () {
    return (
      <form>
        <div className="page-content container">
          <div className="row">
            <div className="col-md-4 col-md-offset-4">
              <div className="login-wrapper">
                <div className="box">
                  <div className="content-wrap">
                    <h6>Sign Up</h6>
                    <input className="form-control" name ="email" placeholder="E-mail address" type="text" valueLink={this.linkState('email')}/>
                    <input className="form-control" name="password" placeholder="Password" type="password"/>
                    <input className="form-control" placeholder="Confirm Password" type="password" />
                    <div className="action">
                      <button type="button" className ="btn btn-primary signup" onClick={this.saveData}>Sign Up</button>
                    </div>                
                  </div>
                </div>
                <div className="already">
                  <p>Have an account already?</p>
                  <Link to ="/reactApp/">Login</Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    )
  }
});

Answer 1

请在 React documentation. 中阅读更多有关 React 基础知识和处理表单状态的信息。不需要混合或任何复杂的东西。同样如上所述 “从 React v15 开始不推荐使用 ReactLink。建议明确设置值和更改处理程序，而不是使用 ReactLink。”

您的每个文本输入都应该有一个更改处理程序，就像错误消息所说的那样...您可以通过多种方式完成此操作，但下面是一个基本示例。在此处的 fiddle 中查看下面的片段 https://jsfiddle.net/09623oae/

React.createClass({
  getInitialState: function() {
    return({
      email: "",
      password: "",
      passwordConfirmation: ""
    })
  },

  submitForm: function(e) {
    e.preventDefault()
    console.log(this.state)
  },

  validateEmail: function(e) {
    this.setState({email: e.target.value})
  },

  validatePassword: function(e) {
    this.setState({password: e.target.value})
  },

  confirmPassword: function(e) {
    this.setState({passwordConfirmation: e.target.value})
  },

  render: function() {
    return (
      <form onSubmit={this.submitForm}>
        <input 
          type="text"
          value={this.state.email}
          onChange={this.validateEmail}
          placeholder="email"
        />
        <input 
          type="password"
          value={this.state.password}
          onChange={this.validatePassword}
          placeholder="password"
        />
        <input 
          type="password"
          value={this.state.passwordConfirmation}
          onChange={this.confirmPassword}
          placeholder="confirm"
        />            
      </form>
    )
  }
});