Question

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

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

例如。这是带有添加的空键的查询字符串：

http://api/ixmasterdocument?filter=IDXT002|&filter=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:[],
  }) 
}

这是我的inputchange方法。

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

这是submit方法。

 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>

Answer 1

由于您要忽略/跳过value=''的api调用中的键/值对，因此将检查置于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);
};

或者另一种可能的方式是，在formValues方法中将{}设置为clear。您只清除该对象的值而不是键，如果您重置变量，则只有新的键值可用。

赞：

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

输入重置后如何从输入中删除键？

1 个答案: