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

【问题标题】：How to reset value of Select and Input component in reactstrap on button click?如何在按钮单击时重置 reactstrap 中选择和输入组件的值？
【发布时间】：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 完成

标签： javascript reactjs frontend reactstrap

【解决方案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("");
}

【讨论】：