解决方案

Question

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

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

解决方案

您不能再使用valueLink，而是使用onChange react事件来侦听输入更改，并value设置更改后的值。

class MyForm extends React.Component {
  constructor(props) {
    super(props);    
    this.state = {value: 'Hello!'};
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

澄清

请注意，由于值是从状态设置的，因此只会通过更改附加状态进行更新，写入输入时不会执行任何操作，除非您监听输入已更改（通过onChange事件）并相应地更新状态。

来源：from React documentation

Answer 2

请在React documentation.无混音或任何复杂的要求中阅读更多关于React基础和处理状态的基本知识。同样如上所述"ReactLink is deprecated as of React v15. The recommendation is to explicitly set the value and change handler, instead of using ReactLink."

您的每个文本输入都应该有一个更改处理程序，就像错误消息所说的那样......您可以通过多种方式完成此操作，但下面是一个基本示例。请在此处查看下面的代码段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>
    )
  }
});

Answer 3

如果您希望稍后访问它，则应将状态设置为至少为空。类似于下面的东西会做

getInitialState() {
 return {};
},

Answer 4

没有valueLink的ReactLink

您可以使用

进行更改

<input type="text" value={valueLink.value} onChange={handleChange} />

参考：

https://facebook.github.io/react/docs/two-way-binding-helpers.html

Answer 5

发生此警告是因为React Link was deprecated in React 0.15：

自React v15起，不推荐使用ReactLink。建议是显式设置值并更改处理程序，而不是使用 ReactLink。

所以，而不是使用this.linkState('email')和valueLink：

<input className="form-control" 
    name ="email" 
    placeholder="E-mail address" 
    type="text" 
    valueLink={this.linkState('email')}/>

使用this.state.email和onChange功能：

callThisWhenChangeEmail: function(emailFromInput) {
    this.setState({
        email: emailFromInput
    });
},

render () {
    /* the existent code above */

    <input className="form-control" 
        name ="email" 
        placeholder="E-mail address" 
        type="text" 
        value={this.state.email} 
        onChange={this.callThisWhenChangeEmail}/>

    /* the existent code below */
}

当用户在输入中键入一些电子邮件时，将调用函数callThisWhenChangeEmail，并将电子邮件作为参数（emailFromInput）接收。因此，您只需要在州内设置此电子邮件。

使用reactjs

5 个答案:

解决方案

澄清