Question

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

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

我要做的是采取＆＃34;描述＆＃34; ，＆＃34; ismeeting＆＃34;并且，＆＃34; expID＆＃34;表格中的值和前端的复选框（＆＃34; ismeeting＆＃34;的复选框）并将其传递给后端。以获取描述值为例;我正在使用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

已弃用字符串引用。所以你需要做的就是更新你的参考

<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} />
}

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

1 个答案: