Question

我目前正在学习反应，当我想提交价值时我遇到了麻烦。我想要的是将它们放在一个对象中。

var React = require("react");

var AddContact = React.createClass({
  onSubmit:function(e){
  e.preventDefault();

  var name = this.refs.name.value;
  var phoneNumber = this.refs.phoneNumber.value;
  var update = {};


  if(name.length > 0){
   this.refs.name.value = "";
   update.name = name;
 }else if (phoneNumber.length > 0) {
  this.refs.phoneNumber.value = "";
  update.phoneNumber = phoneNumber;
 }else if(name === ""){
  this.refs.name.focus();
 }else{
  this.refs.phoneNumber.focus();
 }

 this.props.onSetContact(update);
 },

 render:function(){
  return(
  <div>
    <form onSubmit={this.onSubmit}>
      <input type="text" ref="name" placeholder="Contact Name"/>
      <input type="text" ref="phoneNumber" placeholder="Phone Number"/>
      <input type="submit" value="Add Contact"/>
    </form>
  </div>
  )
 }
});

module.exports = AddContact;

在这种情况下，我想在更新变量上存储值，但是当我提交它们时，我得到的东西变成了不同的对象。

无论如何onSetContact是在父组件上定义的，它只是记录表单的输出。

我的目标是将它们设为{name：[value]，phoneNumber：[value]}

谢谢你们

Answer 1

问题在于此代码：

 if(name.length > 0){
   this.refs.name.value = "";
   update.name = name;
 }else if (phoneNumber.length > 0) {
  this.refs.phoneNumber.value = "";
  update.phoneNumber = phoneNumber;
 }else if(name === ""){
  this.refs.name.focus();
 }else{
  this.refs.phoneNumber.focus();
 }

如果存在name，它将永远不会进入＃2

您需要在另一个phoneNumber语句中检查if，如下所示：

if(name.length > 0){
   this.refs.name.value = "";
   update.name = name;
} else {
  this.refs.name.focus();
}

if (phoneNumber.length > 0) {
  this.refs.phoneNumber.value = "";
  update.phoneNumber = phoneNumber;
} else {
  this.refs.phoneNumber.focus();
}

Answer 2

问题在于您的条件为n onSubmit函数，因为您正在使用if-else，如果一个语句为真，则不执行其他语句，将其更改为

onSubmit:function(e){
  e.preventDefault();

  var name = this.refs.name.value;
  var phoneNumber = this.refs.phoneNumber.value;
  var update = {};

  if(name.length > 0 && phoneNumber.length > 0) {
      this.refs.name.value = "";
      update.name = name; 
      this.refs.phoneNumber.value = "";
      update.phoneNumber = phoneNumber;
      this.props.onSetContact(update);
  } else if (name.length == 0){
       this.refs.name.focus();
  }else{
       this.refs.phoneNumber.focus();
  }


 },

除此之外，React文档坚持使用Ref回调而不是字符串引用，将它们定义为

<div>
    <form onSubmit={this.onSubmit}>
      <input type="text" ref={(ip) => this.name=ip} placeholder="Contact Name"/>
      <input type="text" ref={(ip) => this.phoneNumber=ip} placeholder="Phone Number"/>
      <input type="submit" value="Add Contact"/>
    </form>
  </div>

并像

一样使用它们

   var name = this.name.value;
   var phoneNumber = this.phoneNumber.value

如何处理多个输入值并将其作为一个对象

2 个答案: