如何在按钮单击时重置 reactstrap 中选择和输入组件的值？

Posted 2023-03-23

【中文标题】如何在按钮单击时重置 reactstrap 中选择和输入组件的值？

【英文标题】：How to reset value of Select and Input component in reactstrap on button click?

【发布时间】：2020-12-23 01:27:52

【问题描述】：

我有两个组件 Select 和 Input 来自 reactstrap 库。从下拉列表中选择一个项目并给出输入，单击添加按钮将数据发送到表，但之前的输入在添加后仍保留在字段中。 单击按钮后，如何将字段重置回占位符？ 选择组件看起来像

         <Select
          name="Item"
          closeMenuOnSelect=true
          components=animatedComponents
          placeholder="Select Item"
          options=this.props.itemsOptions
          onChange=(data) => this.handleOnDropDownSelect(data, "addItem")
         />

和输入字段：

        <Input
          type="number"
          min=0
          placeholder="QTY"
          onChange=(e) => this.handleOnDropDownSelect(e, "quantity")
          className="item-add-qty"
        />

下面是handleOnDropDownSelect()函数的一部分

else if (key === "addItem") 
  this.setState(
    itemToAdd: Object.assign(, this.state.itemToAdd,  id: data.value ),
  );
 else if (key === "quantity") 
  this.setState(
    itemToAdd: Object.assign(, this.state.itemToAdd, 
      quantity: parseInt(data.target.value),
    ),
  );

【问题讨论】：

请添加handleOnDropDownSelect()代码

@AmareshSM 完成

【参考方案1】：

当点击添加按钮时，您必须清除输入并选择标签元素状态以重置字段。

 this.setState(state => (
      inputText: '',
      dropdown: ''
    ));

和上面的代码一样，将 input(inputText) 和 select(dropdown) 状态值设置为''。

查看演示：

class TodoApp extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      items: [],
      inputText: '',
      Item: ''
    ;
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  

  render() 
    return ( <div >
      <h3 > TODO < /h3> 
      < TodoList items = 
        this.state.items
      
      /> 
      <form onSubmit = 
        this.handleSubmit
       >
      <label htmlFor = "new-todo" >
      </label> 
      
      < input name = "inputText"   id = "new-todo"   onChange = 
        this.handleChange
           value = this.state.inputText/> 
     
     <button >  Add </button>

      < select name = "dropdown" onChange = this.handleChange
      value = this.state.dropdown >
      <option value = "" > please select < /option>
      <option value = "A" > Apple < /option>
      <option value = "B" > Banana < /option> 
      <option value = "C" > Cranberry < /option> 
      </select>
      </form> 
      </div>
    );
  

  handleChange(e) 
    this.setState(
      [e.target.name]: e.target.value
    );
  

  handleSubmit(e) 
    e.preventDefault();
    console.log(this.state.inputText, this.state.dropdown);
    let text = this.state.inputText + " " + this.state.dropdown;
    const newItem = 
      text: text,
    ;

    this.setState(state => (
      items: state.items.concat(newItem),
      inputText: '',
      dropdown: ''
    ));

  


class TodoList extends React.Component 
  render() 
    return ( <ul > 
        this.props.items.map(item => ( <li > item.text < /li>))
       </ul>
    );
  


ReactDOM.render( <
  TodoApp / > ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

【参考方案2】：

您可以使用 States/Refs（取决于您的要求）控制 Select & Input 的值。

const [dropDown, setDropdown] = useState("");
const [input, setInput] = useState("");

<Select ...options value=dropDown />
<Input ...options value=input />

在您的 handleOnDropDownSelect 内：

const handleOnDropDownSelect = (val) => 
    setDropdown(val);

点击按钮，清空状态值：

const handleButtonClick = () => 
    setDropdown("");
    setInput("");