尝试使用 this.refs.value 时，不推荐使用 this.refs 错误

Question

我正在尝试向数据库发出一个发布请求，以使用"react-dom": "^15.6.1" 发布一个名为 questions 的对象。数据可能如下：

{description: 'What is E-commerce?', ismeeting: false, expID: '123A2'}

我要做的是从前端的表单和复选框（“ismeeting”的复选框）中获取“description”、“ismeeting”和“expID”值，并将其传递给后端。例如获取描述值；我正在使用this.refs.description.value。但是我在 onSubmit(e) 函数中收到错误 Using this.refs is deprecated，在 render() 函数中收到错误 Using string literals in ref attributes is deprecated react/no-string-refs

这是 OnSubmit 代码。

     onSubmit(e) {
    const newQues = {
      description: this.refs.description.value,
      ismeeting: this.refs.check_me.checked,
      expID: this.refs.expID.value
    };
    this.addQues(newQues);
    e.preventDefault();
}

这里是 render() 代码。

render() {
    return (
      <div>
        <br/>
        <h1> DO NOT HESISTATE TO ASK OUR EXPERTS </h1>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="input-field">
            <input type="text" name="description" ref="description"/>
            <label htmlFor="description"> Description </label>
          </div>
          <div className="input-field">
            <input type="text" name="expID" ref="expID"/>
            <label htmlFor="name"> expID </label>
          </div>
          <div className="checkbox">
            <label>
              <input type="checkbox" name="ismeeting" ref="check_me" />Meeting
            </label>
          </div>
          <input type ="submit" value="ASK" className="btn" />
        </form>
      </div>
    );
  }

终于有了完整的代码。

import React, { Component } from 'react';
import axios from 'axios';
import '../Styles.scss';

class Questions extends Component {
  addQues(newQues) {
    console.log(newQues);
    axios.request({
      method: 'Post',
      url: 'http://localhost:3001/api/Questions',
      data: newQues
    }).then(response => {
    }).catch(err => console.log(err));
  }
  constructor() {
    super();
    this.state = {
      Questions: []
    };
  }
  onSubmit(e) {
    const newQues = {
      description: this.refs.description.value,
      ismeeting: this.refs.check_me.checked,
      expID: this.refs.expID.value
    };
    this.addQues(newQues);
    e.preventDefault();
  }
  render() {
    return (
      <div>
        <br/>
        <h1> DO NOT HESISTATE TO ASK OUR EXPERTS </h1>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="input-field">
            <input type="text" name="description" ref="description"/>
            <label htmlFor="description"> Description </label>
          </div>
          <div className="input-field">
            <input type="text" name="expID" ref="expID"/>
            <label htmlFor="name"> expID </label>
          </div>
          <div className="checkbox">
            <label>
              <input type="checkbox" name="ismeeting" ref="check_me" />Meeting
            </label>
          </div>
          <input type ="submit" value="ASK" className="btn" />
        </form>
      </div>
    );
  }
}
export default Questions;

Answer 1

字符串引用已被弃用。所以你需要做的是更新你的 refs

<input type="text" name="expID" ref="expID"/>

应该更新为

setExpIdRef = (r) => this.expIdRef = r;


onSubmit = (e) => {
  const newQues = {
    expID: this.expIdRef.value
  };
  // Do what you need to with newQuest i.e call your database
}

render() {
  ...
  <input type="text" name="expID" ref={this.setExpIdRef}/>
}

最好的解决方案是让您的输入受控输入。您在哪里跟踪状态中的值。

constructor() {
  super();
  this.state = {
    expID: ''
  };
}

onExpIdChange = (e) => {
  this.setState({ 
    expID: e.target.value
  })
}

onSubmit = (e) => {
  const newQues = {
    expID: this.state.expID
  };
  // Do what you need with the newQues object
}

render() {
  ...
  <input type="text" name="expID" onChange={this.onExpIdChange} />
}