Javascript 如何在输入重置时从我的输入中删除键？

我有一个多输入的搜索表单

表单有一个重置按钮，用于启动新的搜索。目前我让它工作，以便从状态中清除该值。问题是没有删除键值，因此输入只包含在一个空键的新搜索中。这导致搜索将空键作为查询字符串的一部分

比如说。这是一个添加了空键的查询字符串：

http://api/ixmasterdocument?filter=IDXT002|&过滤器=IDXT001 | 1111

如您所见，

filter=IDXT002 |

为空，并且包含在查询字符串中，并且具有正确的键值对

filter=IDXT001 | 1111

下面是我的重置方法，它从状态中清除键值

clear = () => {
  let emptyValues = JSON.parse(JSON.stringify(this.state.formValues))
  Object.keys(emptyValues).forEach(key => emptyValues[key] = "")
  this.setState({
    formValues: emptyValues,
    contracts:[],
  }) 
}

这是我的输入更改方法

 handleInputChange = (e) => {
      console.log("==handleInputChange==")
      let newValues = JSON.parse(JSON.stringify(this.state.formValues))
      newValues[e.target.name] = e.target.value
      this.setState({
        formValues: newValues
      })
      console.log("newFormValues is: " + JSON.stringify(newValues))
    }

这是提交方法

 handleFormSubmit = event => {  
    event.preventDefault();
    const formData = this.state.formValues
    let query = '';
    let keys = Object.keys(formData);
    keys.forEach(k => { 
      if (query !== "")
      query += `&`;
      query += `filter=`
      query += `${k}|${formData[k]}`

     })
     return this.loadContracts(query);
    };

这是带有重置按钮的输入组件

<form className="form-inline col-md-12" onReset={this.props.handleFormReset}>

   {this.props.labels.map(label => (
     <div className="card border-0 mx-auto" style={styles} key={label.Id}>
          <ul className="list-inline ">
             <span>
               <li>
                 <Labels  htmlFor={label.DisplayName} >{label.DisplayName}:</Labels>
               </li>
               <li >
                 <div>
                  <Input  
                   key={label.Id}
                   onChange={this.props.handleInputChange}
                   value={this.props.formValues[label.DataField] ||""}
                   type="search"
                   maxLength="999"
                   style={{height:34}}
                   name={label.DataField ||""}

                   className={"form-control mb-2 mr-sm-2"} 
                   id={label.DataField}
                 />
                 State: {this.props.formValues[label.DataField]}

                 </div>

               </li> 
             </span>
         </ul>
     </div>
   ))}

  <div className=" col-sm-12">

  <Button
        style={{ float: "left", marginBottom: 10 }} 
        className="btn btn-success"
        type="submit"
        onClick={this.props.handleFormSubmit}
      >
        Search
      </Button>

      <Help />

      <Button
        style={{ float: "left", marginBottom: 10 }} 
        className="btn btn-secondary"
        // type="reset"
        onClick={this.props.clear}
      >
        Reset
      </Button>
  </div>
  </form>

{this.props.labels.map（label=>(


{label.DisplayName}：


状态：{this.props.formValues[label.DataField]}


))}
搜寻
重置

由于您希望忽略/跳过api调用中的键值对，其中

value='

，因此请将check in

handleSubmit

函数放入其中，并仅包含非空值

像这样：

handleFormSubmit = event => {  
  event.preventDefault();
  const formData = this.state.formValues
  let query = '';
  let keys = Object.keys(formData);

  keys.forEach(k => {
    // here
    if(formData[k]) {
      if (query !== "")
        query += `&`;
      query += `filter=`
      query += `${k}|${formData[k]}`
    }
  })

  return this.loadContracts(query);
};

clear = () => {
  this.setState({
    formValues: {},
    contracts:[],
  }) 
}

或者另一种可能的方法是，在

clear

方法中将

formValues

设置为

{}

。您只清除该对象中的值而不是键，如果重置变量，则只有新的键值可用

像这样：

handleFormSubmit = event => {  
  event.preventDefault();
  const formData = this.state.formValues
  let query = '';
  let keys = Object.keys(formData);

  keys.forEach(k => {
    // here
    if(formData[k]) {
      if (query !== "")
        query += `&`;
      query += `filter=`
      query += `${k}|${formData[k]}`
    }
  })

  return this.loadContracts(query);
};

clear = () => {
  this.setState({
    formValues: {},
    contracts:[],
  }) 
}

---

您想删除所有键和值，还是有条件？您还可以显示

handleFormSubmit

方法吗？仅显示上一次搜索中使用的键和值。只是为了重新设置它们，以便它们可以或不可以在新系统中使用search@MayankShukla添加了handleFormSubmit方法我认为，您应该在handleSubmit中进行检查并跳过所有键值，其中

value=''

，如下所示：

if（formData[k]）{if（query！='=''）/*…rest code*/}

，重置部分似乎可以，您正在设置

emptyValues[key]=“”

以清除该值。好的，这就完成了。从查询字符串中排除空输入。从控制台中，我可以看到密钥仍然处于状态，但只是被忽略了。你能回答一下你的意见吗？thankscheck另一种可能的方法，也应该有效。这也可以用于清除值。我仍然需要包含if语句，以防止它包含在查询字符串中