Я новичок в 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>
    )
  }
});
 

Пожалуйста, прочитайте больше об основах React и обработке состояния в формах в документации 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>
    )
  }
});
 

Решение

Вы 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) и не обновите состояние соответствующим образом.

источник: из документации React

Вы должны изначально установить для своего состояния значение по крайней мере empty, если хотите получить к нему доступ в более поздний момент времени. Подойдет что-то подобное приведенному ниже

 getInitialState() {
 return {};
},
 

Реактивная ссылка без valueLink

Вы можете изменить с помощью

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

Ссылка:

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

Это предупреждение возникает из-за того, что ссылка React устарела в React 0.15:

ReactLink устарел с версии React v15. Рекомендуется явно задать значение и изменить обработчик вместо использования 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 ) . Итак, вам нужно только установить это электронное письмо в состояние.