如何在單擊按鈕時重置 reactstrap 中選擇和輸入組件的值？

Question

我有來自reactstrap庫的兩個組件Select和Input 。 從下拉列表中選擇一個項目並給出輸入，單擊添加按鈕將數據發送到表格，但先前的輸入在添加后保留在字段中。 單擊按鈕后，如何將字段重置回占位符？ 選擇組件看起來像

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

Answer 1

您可以使用狀態/參考來控制選擇和輸入的值（取決於您的要求）。

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("");
}

Answer 2

單擊添加按鈕后，您將清除輸入並選擇標記元素狀態以重置字段。

 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>